React Highcharts Wrapper
A React wrapper for building Highcharts components.
-
A helper Component to wrap chart instantiation
-
A Provider that hosts a singular reference to the Highcharts global
TLDR
app.js
render() (
<HighchartsProvider executeFuncs={[]}> // [optional] array of functions to decorate window.Highcharts
<App />
</HighchartsProvider>
)
chart.js
render() (
<AbstractChart config={{ // any Highcharts config object here
chart: {
type: 'pie'
}
}} />
)
Why
-
You want to be productive with Highcharts in React.
-
You want to build Highcharts components using the Highcharts Config API.
-
You want a tiny library.
-
You want a singular reference to the Highcharts Primitive, to do things like apply a Custom Theme or extend Highcharts for your whole application.
Demo
Try it:
Examples:
https://react-highcharts-wrapper-demos.firebaseapp.com
Pitch site:
https://react-highcharts-wrapper.firebaseapp.com
The problem
-
Highcharts does not translate to the ES6+ ecosystem, as the Highcharts constructor is global you can not apply application wide configuration to Highcharts without attaching it to window.
-
Highcharts depends on the DOM existing to render.
-
Rehydrating Highcharts in the React view re-rendering paradigm is not native for Highcharts.
The solution
- Wraps your application with Highcharts using
HighchartsProvider
. And then consumes the Highcharts constructor internally with a higher order componentwithHighcharts
2.3. Render charts and manage their lifecycle with a helper component AbstractChart
, passing in normal Highcharts config
as props.
Getting started
1. Add the module to your React app:
npm install react-highcharts-wrapper
HighchartsProvider
.
2. Wrap your app with app.js
import {HighchartsProvider} from "react-highcharts-wrapper";
const App = () => {
return (
<HighchartsProvider>
<div>
<p>Welcome to my amazing app</p>
<MyPage />
</div>
</HighchartsProvider>
)
};
This will make Highcharts available to context.
AbstractChart
passing in a standard Highcharts configuration object.
3. Build the chart components you need with components/myPieChart.js
import {AbstractChart} from 'react-highcharts-wrapper';
const MyPieChart = () => {
return (
<div>
<h1>My Pie Chart</h1>
<AbstractChart config={{
chart: {
type: 'pie'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{name: 'Microsoft Internet Explorer', y: 56.33},
{name: 'Chrome', y: 24.03, sliced: true, selected: true},
{name: 'Firefox', y: 10.38},
{name: 'Safari', y: 4.77},
{name: 'Opera', y: 0.91},
{name: 'Proprietary or Undetectable', y: 0.2}
]
}],
}} />
</div>
)
};
4. Consume the charts like any other component
components/myPage.js
import MyPieChart from './myPieChart';
const MyPage = () => {
return (
<div>
<h1>My page</h1>
<MyPieChart />
</div>
)
};
Done! 🏁
Optional: How can I extend the Highcharts primitive?
You can pass an array of executable functions to HighchartsProvider
like this:
<HighchartsProvider executeFuncs={[
(Highcharts) => {
console.log(Highcharts)
return Highcharts;
}
]}>
This can be useful for setting a default theme for example for Highcharts:
const HIGHCHARTS_THEME = {
chart: {
style: {
fontFamily: 'Open Sans,sans-serif',
},
},
}
<HighchartsProvider executeFuncs={[
(Highcharts) => {
Highcharts.setOptions({
...HIGHCHARTS_THEME
});
return Highcharts;
},
(Highcharts) => {
Highcharts.loremIpsum = 'boo ya!';
return Highcharts;
}
]}>