react-highcharts
![Build Status](https://travis-ci.org/kirjs/react-highcharts.svg?branch=master)
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 = {
};
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
Using highstock
Just require require('react-highcharts/highstock');
instead of react-highcharts
For Contributors
Update Highcharts Version
-
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
.
Running tests
Run npm tests