https://github.com/carmnk/react-techchart
an interactive and extensible react charting tool designed for technical chart analysis.
https://github.com/carmnk/react-techchart
chart charting react technical-analysis typescript
Last synced: 4 months ago
JSON representation
an interactive and extensible react charting tool designed for technical chart analysis.
- Host: GitHub
- URL: https://github.com/carmnk/react-techchart
- Owner: carmnk
- License: mit
- Created: 2021-06-11T09:07:57.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-01-24T18:39:51.000Z (over 4 years ago)
- Last Synced: 2025-10-04T03:54:14.943Z (9 months ago)
- Topics: chart, charting, react, technical-analysis, typescript
- Language: TypeScript
- Homepage:
- Size: 38.5 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-techchart
[](https://github.com) [](https://github.com) 
  
an interactive and extensible react charting tool designed for technical analysis.
experimental release
---
## Installation
```javascript
npm i react-techchart
```
## Usage
`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`.
The `useChartController` hook returns the ChartController - an object containing all necessary data and interfaces to display the chart, to access and change the current state.
The
``
component provides the logic to display the chart (draws hook data on multiple canvas-layers), render the labels and the menu incl. opening button.
```typescript
import React from "react";
import { useChartController, Chart, iRSI, EMA, KAMA, defaultDarkTheme, Types as T } from "react-techchart";
// optional definition of initial indicators
const initialIndicators = [
{
id: "kama_01",
type: "indicator",
indicator: KAMA,
graphProps: {
style: {
strokeColor: ["#0693E3"],
},
},
},
{ type: "indicator", indicator: iRSI(5), id: "rsi_01" },
{
id: "ema_rsi_01",
type: "indicator",
indSrcId: "rsi_01",
indicator: EMA,
graphProps: {
style: {
strokeColor: ["#0693E3"],
},
},
},
];
// optional settings (for useChartController and Chart component)
const settings = {
initialTheme: defaultDarkTheme,
initialIndicators: initialIndicators,
// maxUpdatesPerSec: 40, default is 15
};
// an OHLC-dataseries is required - replace with your dataseries
export const exampleDataseries = [
{
date: "2021-10-04T00:00:00.000Z",
open: 335.529999,
high: 335.940002,
low: 322.700012,
close: 326.230011,
volume: 42885000, // optional
},
{
date: "2021-10-05T00:00:00.000Z",
open: 328.579987,
high: 335.179993,
low: 326.160004,
close: 332.959991,
volume: 35377900, // optional
},
// ...
];
// your page component
export const MyPage = () => {
const [Data, setData] = React.useState({
// data: array's objects require a date property of type Date (not string)
data: exampleDataseries.map((dat) => ({ ...dat, date: new Date(dat.date) })),
name: "Your Chart",
type: "chart", // a string literal
id: "mainchart", // arbitrary but unique id
});
const Controller = useChartController({
data: Data,
settings,
events: {
onDataChange: (newData) => {
setData(newData);
},
},
});
// optional - to access or control the component from outside
const {
ChartState, // ➜ current ChartState
Dispatch, // ➜ Dispatch to modify ChartState (reducer-dispatch)
} = Controller;
return (
);
};
```
[see full API docs](https://carmnk.github.io/react-techchart/)