react-highcharts

Highcharts component for react.

Demo

You can find the full code for the examples here

To run the demo:

Clone the repo
run:
```
npm install
npm run demo
```
Point your browser at http://localhost:8080

Installation

npm install react-highcharts --save

Usage

Basic Usage

var React = require('react');
var Highcharts = require('react-highcharts');

var config = {
  /* HighchartsConfig */
};
React.render(<Highcharts config = {config}></Highcharts>, document.body);

Accessing Highcharts API After Render

For access to methods & properties from the Highcharts library you can use Highcharts.Highcharts. For example, the Highcharts options are available via Highcharts.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 <Highcharts config={config} ref="chart"></Highcharts>;
  }
}

Limiting Highchart Rerenders

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

Using highcharts-more

Just require require('react-highcharts/more'); instead of react-highcharts

Update Highcharts Version (For Contributors)

Install new highcharts version.

npm unistall highcharts-release --save-dev
npm install highcharts-release --save-dev

Increment the react-highcharts version such that a patch, minor release, or major release of Higcharts is reflected in a corresponding version increase for react-highcharts.

teosz / react-highcharts