Fork of react-highcharts React wrapper for highcharts

Usage no npm install needed!

<script type="module">
  import reacthighcharts from '';



Build Status

Highcharts component for react.


react-highcharts | react-highcharts/more | react-highcharts/highstock | react-highcharts/highmaps

You can find the full code for the examples here

To run the demo:

  1. run:

    git clone
    cd react-highcharts && npm install
    npm run demo
  2. Point your browser at http://localhost:8080


npm install react-highcharts --save



npm install react-highcharts highcharts react --save
const React = require('react');
const ReactDOM = require('react-dom');

const ReactHighcharts = require('react-highcharts'); // Expects that Highcharts was loaded in the code.

const config = {
  /* HighchartsConfig */

ReactDOM.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);

Accessing Highcharts API After Render

For access to methods & properties from the Highcharts library you can use ReactHighcharts.Highcharts. For example, the Highcharts options are available via ReactHighcharts.Highcharts.getOptions().

Highcharts provides an API for manipulating a chart after the initial render. See the Methods and Properties in the documentation. Here's how you access it:

class MyComponent extends React.Component {
  componentDidMount() {
    let chart = this.refs.chart.getChart();
    chart.series[0].addPoint({x: 10, y: 12});

  render() {
    return <ReactHighcharts config={config} ref="chart"></ReactHighcharts>;

Limiting Highchart Rerenders

Rerendering a highcharts graph is expensive. You can pass in a isPureConfig option to the ReactHighcharts component, which will keep the highcharts graph from being updated so long as the provided config is referentially equal to its previous value.

Rendering on the server with node

See this recipe

Using highmaps

const ReactHighmaps = require('react-highcharts/ReactHighmaps');

Using highstock (demo)

const ReactHighstock = require('react-highcharts/ReactHighstock')

Using highcharts modules/add-ons like exporting, data, etc.

Use highcharts-more npm package.

const ReactHighcharts = require('react-highcharts')

You can find the full list list here

For Contributors

Running tests

Run npm tests

Running demo

Run npm run demo

Using with React@0.13

npm install react-highcharts@^3.0.0 --save