use-highcharts
v0.0.6
Published
A simple hook that will make your work with the highcharts and react easier.
Downloads
199
Readme
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
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.