{"id":15760547,"url":"https://github.com/dariush-hassani/react-candlestick-chart","last_synced_at":"2025-12-25T14:41:38.443Z","repository":{"id":238367872,"uuid":"765235676","full_name":"Dariush-Hassani/react-candlestick-chart","owner":"Dariush-Hassani","description":"High performance, lightweight and interactive candlestick chart using the \u003ccanvas\u003e tag, D3 and React.","archived":false,"fork":false,"pushed_at":"2024-05-20T18:00:17.000Z","size":357,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-21T19:02:54.072Z","etag":null,"topics":["candlestick-chart","canvas","canvas-api","canvas2d","chart","charting-library","d3","d3-visualization","d3js","datavisualization","html5-canvas","html5-charts","react"],"latest_commit_sha":null,"homepage":"https://dariush-hassani.github.io/react-candlestick-chart-demo","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dariush-Hassani.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-29T14:35:46.000Z","updated_at":"2024-05-20T18:00:20.000Z","dependencies_parsed_at":"2024-10-04T10:58:51.768Z","dependency_job_id":"32bd2676-6b0b-4dac-b944-b1463b76112c","html_url":"https://github.com/Dariush-Hassani/react-candlestick-chart","commit_stats":null,"previous_names":["dariush-hassani/react-candlestick-chart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dariush-Hassani%2Freact-candlestick-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dariush-Hassani%2Freact-candlestick-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dariush-Hassani%2Freact-candlestick-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dariush-Hassani%2Freact-candlestick-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dariush-Hassani","download_url":"https://codeload.github.com/Dariush-Hassani/react-candlestick-chart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243266715,"owners_count":20263789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["candlestick-chart","canvas","canvas-api","canvas2d","chart","charting-library","d3","d3-visualization","d3js","datavisualization","html5-canvas","html5-charts","react"],"created_at":"2024-10-04T10:58:43.267Z","updated_at":"2025-12-25T14:41:38.436Z","avatar_url":"https://github.com/Dariush-Hassani.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-candlestick-chart\n\nHigh performance, lightweight and interactive candlestick chart using the canvas tag, D3 and React.\n\n## Installation\n\n```bash\nnpm i react-candlestick-chart\n```\n\n## Demo\n\nTo discover all features, capabilities and source code, check out [Live Demo](https://dariush-hassani.github.io/react-candlestick-chart)\n\n![alt text](https://github.com/Dariush-Hassani/react-candlestick-chart/blob/main/demo/public/Animation3.gif?raw=true)\n\n## Basic Usage\n\n```javascript\nimport CandlestickChart from \"react-candlestick-chart\";\n\nfunction App() {\n  return (\n    \u003cCandlestickChart\n      data={data}\n      id={\"chart1\"}\n      width={1000}\n      height={400}\n      decimal={2}\n      scrollZoom={{\n        enable: true,\n        max: 20,\n      }}\n      rangeSelector={{\n        enable: true,\n        height: 150,\n        initialRange: { type: \"month\", value: 1 },\n      }}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n### data - required\n\n```javascript\ndata: any;\n\nexample: [\n  {\n    date: \"2018-10-23\", //or 1540166400000 or \"2018-10-22 03:30\"\n    open: 182.47,\n    high: 183.01,\n    low: 177.39,\n    close: 179.93,\n    //position is optional\n    position: {\n      positionType: \"long\", // or \"short\"\n      sl: 170, //stop loss\n      tp: 190, // take profit\n      positionValue: 180,\n    },\n  },\n  {\n    date: \"2018-10-24\",\n    open: 180.82,\n    high: 181.4,\n    low: 177.56,\n    close: 178.75,\n  },\n];\n```\n\n### id - required\n\n```javascript\nid: string;\n```\n\n### width - required\n\n```javascript\nwidth: number;\n```\n\n### height - required\n\n```javascript\nheight: number;\n```\n\n### decimal? - optional\n\ndecimal for price axis.\n\n```javascript\ndecimal?: number; // default value = 0\n```\n\n### scrollZoom? - optional\n\n```javascript\nscrollZoom?: {\n    enable: boolean;\n    max: number;\n};\n\n/*\ndefault value :\n{\n    enable: false,\n    max: 1\n}\n*/\n```\n\n### rangeSelector? - optional\n\n```javascript\nrangeSelector?: {\n  enable: boolean;\n  height: number;\n  initialRange?: {\n    type: \"month\" | \"day\" | \"hour\" | \"percent\" | \"milliseconds\";\n    value: number;\n  };\n};\n\n/*\ndefault value :\n{\n  enable: false;\n  height: 0;\n  initialRange?: {\n    type: \"percent\";\n    value: 100;\n  };\n}\n*/\n```\n\n### responsiveBreakPoint? - optional\n\n```javascript\nresponsiveBreakPoint?: number; // default value = 400 (px)\n```\n\n### enableResetButton? - optional\n\n```javascript\nenableResetButton?: boolean; // default value = true\n```\n\n### dataViewerTexts? - optional\n\n```javascript\ndataViewerTexts? : {\n  shortPosition?: string;\n  longPosition?: string;\n  stopLoss?: string;\n  takeProfit?: string;\n  open?: string;\n  high?: string;\n  low?: string;\n  close?: string;\n}\n\n/*\ndefault value:\n{\n  shortPosition: \"Short\",\n  longPosition: \"Long\",\n  stopLoss: \"sl\",\n  takeProfit: \"tp\",\n  open: \"O\",\n  high: \"H\",\n  low: \"L\",\n  close: \"C\",\n}\n*/\n```\n\n### dataViewerColors? - optional\n\n```javascript\ndataViewerColors? : {\n  shortPositionLabel?: string;\n  shortPositionData?: string;\n  longPositionLabel?: string;\n  longPositionData?: string;\n  stopLossLabel?: string;\n  stopLossData?: string;\n  takeProfitLabel?: string;\n  takeProfitData?: string;\n  openLabel?: string;\n  openDataUp?: string;\n  openDataDown?: string;\n  highLabel?: string;\n  highDataUp?: string;\n  highDataDown?: string;\n  lowLabel?: string;\n  lowDataUp?: string;\n  lowDataDown?: string;\n  closeLabel?: string;\n  closeDataUp?: string;\n  closeDataDown?: string;\n}\n\n/*\ndefault value:\n{\n  shortPositionLabel: \"#b2b5be\",\n  shortPositionData:\"#fff\",\n  longPositionLabel:\"#b2b5be\",\n  longPositionData: \"#fff\",\n  stopLossLabel:\"#b2b5be\",\n  stopLossData:\"#F9DB04\",\n  takeProfitLabel:\"#b2b5be\",\n  takeProfitData:\"#04F5F9\",\n  openLabel:\"#b2b5be\",\n  openDataUp:\"#089981\",\n  openDataDown:\"#e13443\",\n  highLabel:\"#b2b5be\",\n  highDataUp:\"#089981\",\n  highDataDown:\"#e13443\",\n  lowLabel:\"#b2b5be\",\n  lowDataUp:\"#089981\",\n  lowDataDown:\"#e13443\",\n  closeLabel:\"#b2b5be\",\n  closeDataUp:\"#089981\",\n  closeDataDown:\"#e13443\",\n}\n*/\n```\n\n### ColorPalette? - optional\n\n```javascript\nColorPalette? : {\n  background?: string;\n  grid?: string;\n  tick?: string;\n  selectorLine?: string;\n  selectorLabelBackground?: string;\n  selectorLabelText?: string;\n  greenCandle?: string;\n  redCandle?: string;\n  longPosition?: string;\n  shortPosition?: string;\n  sl?: string;\n  tp?: string;\n  RSChartStroke?: string;\n  RSChartOverlay?: string;\n  RSChartOverlayResize?: string;\n  resetButtonColor?: string;\n}\n\n/*\ndefault value:\n{\n  background:\"#161b26\",\n  grid:\"#222631\",\n  tick:\"#b2b5be\",\n  selectorLine:\"rgba(178,181,190,0.5)\",\n  selectorLabelBackground:\"#2a2e39\",\n  selectorLabelText:\"#b2b5be\",\n  greenCandle:\"#089981\",\n  redCandle:\"#e13443\",\n  longPosition:\"#fff\",\n  shortPosition:\"#fff\",\n  sl:\"#F9DB04\",\n  tp:\"#04F5F9\",\n  RSChartStroke:\"#04F5F9\",\n  RSChartOverlay:\"#000\",\n  RSChartOverlayResize:\"#e13443\",\n  resetButtonColor:\"#04F5F9\",\n}\n*/\n```\n\n## License\n\n[ISC](https://github.com/Dariush-Hassani/react-candlestick-chart/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdariush-hassani%2Freact-candlestick-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdariush-hassani%2Freact-candlestick-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdariush-hassani%2Freact-candlestick-chart/lists"}