{"id":21683358,"url":"https://github.com/carmnk/react-techchart","last_synced_at":"2026-03-06T16:34:29.503Z","repository":{"id":57346202,"uuid":"375967355","full_name":"carmnk/react-techchart","owner":"carmnk","description":" an interactive and extensible react charting tool designed for technical chart analysis.","archived":false,"fork":false,"pushed_at":"2022-01-24T18:39:51.000Z","size":40366,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T03:54:14.943Z","etag":null,"topics":["chart","charting","react","technical-analysis","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carmnk.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}},"created_at":"2021-06-11T09:07:57.000Z","updated_at":"2025-09-23T05:01:38.000Z","dependencies_parsed_at":"2022-09-17T23:21:03.912Z","dependency_job_id":null,"html_url":"https://github.com/carmnk/react-techchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/carmnk/react-techchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmnk%2Freact-techchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmnk%2Freact-techchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmnk%2Freact-techchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmnk%2Freact-techchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carmnk","download_url":"https://codeload.github.com/carmnk/react-techchart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carmnk%2Freact-techchart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30185554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T14:42:24.748Z","status":"ssl_error","status_checked_at":"2026-03-06T14:42:14.925Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["chart","charting","react","technical-analysis","typescript"],"created_at":"2024-11-25T16:11:29.422Z","updated_at":"2026-03-06T16:34:24.487Z","avatar_url":"https://github.com/carmnk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-techchart \u003cbr/\u003e [![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=flat\u0026logo=typescript\u0026logoColor=white)](https://github.com) [![React](https://img.shields.io/badge/React-20232A?style=flat\u0026logo=react\u0026logoColor=61DAFB)](https://github.com) \u003cimg src=\"https://img.shields.io/github/package-json/v/carmnk/react-techchart\" alt=\"Version Badge\" /\u003e \u003cimg src=\"https://img.shields.io/github/license/carmnk/react-techchart.svg\" alt=\"Licence Badge\" /\u003e ![Known Vulnerabilities](https://snyk.io/test/github/carmnk/react-techchart/badge.svg) ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-techchart) ![Coverage Badge](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/carmnk/5a8b9a18eb4d26236cd6a8e753f3b122/raw/react-techchart__heads_main.json)\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/carmnk/resources/raw/main/icons/logo512.png\" alt=\"react-techchart-logo\" height=\"128px\" width=\"128px\"/\u003e \u003cbr/\u003ean interactive and extensible react charting tool designed for technical analysis.\n\u003cbr/\u003e\n\u003cspan style=\"color: red;\"\u003eexperimental release\u003c/span\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\n```javascript\n    npm i react-techchart\n```\n\n## Usage\n\n`react-techchart` is a canvas based charting tool with various different interactive features. In order to conveniently access and control the chart from outside (your implementing react component) the calculation logic is outsourced to a custom react-hook called `useChartController`.\n\nThe `useChartController` hook returns the ChartController - an object containing all necessary data and interfaces to display the chart, to access and change the current state.\n\nThe\n`\u003cChart\u003e`\ncomponent provides the logic to display the chart (draws hook data on multiple canvas-layers), render the labels and the menu incl. opening button.\n\n```typescript\nimport React from \"react\";\nimport { useChartController, Chart, iRSI, EMA, KAMA, defaultDarkTheme, Types as T } from \"react-techchart\";\n\n// optional definition of initial indicators\nconst initialIndicators = [\n  {\n    id: \"kama_01\",\n    type: \"indicator\",\n    indicator: KAMA,\n    graphProps: {\n      style: {\n        strokeColor: [\"#0693E3\"],\n      },\n    },\n  },\n\n  { type: \"indicator\", indicator: iRSI(5), id: \"rsi_01\" },\n  {\n    id: \"ema_rsi_01\",\n    type: \"indicator\",\n    indSrcId: \"rsi_01\",\n    indicator: EMA,\n    graphProps: {\n      style: {\n        strokeColor: [\"#0693E3\"],\n      },\n    },\n  },\n];\n\n// optional settings (for useChartController and Chart component)\nconst settings = {\n  initialTheme: defaultDarkTheme,\n  initialIndicators: initialIndicators,\n  // maxUpdatesPerSec: 40, default is 15\n};\n\n// an OHLC-dataseries is required - replace with your dataseries\nexport const exampleDataseries = [\n  {\n    date: \"2021-10-04T00:00:00.000Z\",\n    open: 335.529999,\n    high: 335.940002,\n    low: 322.700012,\n    close: 326.230011,\n    volume: 42885000, // optional\n  },\n  {\n    date: \"2021-10-05T00:00:00.000Z\",\n    open: 328.579987,\n    high: 335.179993,\n    low: 326.160004,\n    close: 332.959991,\n    volume: 35377900, // optional\n  },\n  // ...\n];\n\n// your page component\nexport const MyPage = () =\u003e {\n  const [Data, setData] = React.useState({\n    // data: array's objects require a date property of type Date (not string)\n    data: exampleDataseries.map((dat) =\u003e ({ ...dat, date: new Date(dat.date) })),\n    name: \"Your Chart\",\n    type: \"chart\", // a string literal\n    id: \"mainchart\", // arbitrary but unique id\n  });\n\n  const Controller = useChartController({\n    data: Data,\n    settings,\n    events: {\n      onDataChange: (newData) =\u003e {\n        setData(newData);\n      },\n    },\n  });\n\n  // optional - to access or control the component from outside\n  const {\n    ChartState, // ➜ current ChartState\n    Dispatch, // ➜ Dispatch to modify ChartState (reducer-dispatch)\n  } = Controller;\n\n  return (\n    \u003cdiv style={{ height: 400 }}\u003e\n      \u003cCChart Controller={Controller} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n[see full API docs](https://carmnk.github.io/react-techchart/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarmnk%2Freact-techchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarmnk%2Freact-techchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarmnk%2Freact-techchart/lists"}