https://github.com/kubk/use-amcharts

React hook for using Amcharts 4 library
https://github.com/kubk/use-amcharts

Last synced: 25 days ago
JSON representation

React hook for using Amcharts 4 library

• Host: GitHub
• URL: https://github.com/kubk/use-amcharts
• Owner: kubk
• License: mit
• Created: 2021-01-10T14:21:35.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-11T12:41:49.000Z (about 3 years ago)
• Last Synced: 2024-04-15T04:25:11.861Z (7 months ago)
• Language: TypeScript
• Size: 229 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-amcharts

React hook for working with Amcharts 4 library. Supports TypeScript type-inference and automatically destroys on component unmount.

### Installation

```

npm i use-amcharts

```

### Usage

```tsx

export const Chart = () => {

  const { amchartsElRef } = useAmcharts(am4charts.XYChart, (chart) => {

    // Configure chart...

  });

  return 
;

};

```


### Runnable example

```tsx

let data = [];

let visits = 10;

for (let i = 1; i < 366; i++) {

  visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

  data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });

}

export const Chart = () => {

  const { amchartsElRef } = useAmcharts(am4charts.XYChart, (chart) => {

    chart.data = data;

    

    const dateAxis = chart.xAxes.push(new am4charts.DateAxis());

    dateAxis.renderer.grid.template.location = 0;

    

    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    valueAxis.tooltip.disabled = true;

    valueAxis.renderer.minWidth = 35;

    

    const series = chart.series.push(new am4charts.LineSeries());

    series.dataFields.dateX = "date";

    series.dataFields.valueY = "value";

    series.tooltipText = "{valueY.value}";

  });

  return 
;

};

```


### Storybook

To run Storybook example:

- `git clone`

- `npm install`

- `npm run storybook`