use-amcharts
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

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 <div ref={amchartsElRef} />;
};

Example

To run Storybook example:

  • git clone
  • npm install
  • npm run storybook

Dependencies (0)

    Dev Dependencies (19)

    Package Sidebar

    Install

    npm i use-amcharts

    Weekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • kubk