use-highcharts v0.0.6

useHighcharts

Install

npm install --save use-highcharts

Usage

To use the useHighcharts hook you need just three things:

• Highcharts instance
• reference to the container that will be used to render your chart
• object that will contain chart options

... and that's it, now you can use Highcharts with React in the same way as you did in the vanilla js.

import React from "react";
import * as Highcharts from 'highcharts';
import useHighcharts from './useHighcharts';

export default function App() {
  const chartContainer = React.useRef(null);
  const chartOptions = {
    title: {
        text: 'useHighcharts demo'
    },
    series: [{
        type: 'line',
        data: [5,4,1,2,7]
    }]
  }
  const chart = useHighcharts(Highcharts, chartContainer, chartOptions);

  return <div ref={chartContainer} id="chart" />
}

Live demos

• Simple line chart
• Chart update
• Automatically update the chart on data change

License

The useHighcharts hook itself is MIT, however keep in mind that it depends on the Highcharts. For commercial use, you need a valid Highcharts license.

This hook is created using create-react-hook.