react-highcharts

Highcharts component for react.

Demos

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 https://github.com/kirjs/react-highcharts.git
   cd react-highcharts && npm install
   npm run demo

2. Point your browser at http://localhost:8080

Installation

npm install react-highcharts --save

Usage

Webpack/Browserify

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);

/* with optional after-render callback */
const afterRender = () => { /* do stuff */ };
ReactDOM.render(<ReactHighcharts config = {config} callback = {afterRender}></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');

• see the demo

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')
require('highcharts-more')(ReactHighcharts.Highcharts)

You can find the full list list here

• see the demo

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