How to create a HighCharts chart in react

Question

How can I create a component with a HighCharts chart, that create the chart ones on the first render and only update the series data when new data comes in using chart.series[0].setData(data,true);

Answer 1

I have made a library called React JSX Highcharts, which might be what you're looking for. GitHub / NPM

It allows you to create Highcharts charts with React components. So to update the series data, would just need to pass an updated data prop.

Behind the scenes, React JSX Highcharts would call setData for you.

Example

<HighchartsChart plotOptions={plotOptions}>
  <Chart />

  <Title>My Highcharts Chart</Title>

  <Legend layout="vertical" align="right" verticalAlign="middle" />

  <XAxis>
    <XAxis.Title>Time</XAxis.Title>
  </XAxis>

  <YAxis id="number">
    <YAxis.Title>My Axis Title</YAxis.Title>
    <LineSeries id="series1" data={data1} />
    <LineSeries id="series2" data={data2} />
  </YAxis>
</HighchartsChart>

Answer 2

getInitialState(){
        return({
            config:{
                /* HighchartsConfig */
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 295.6, 454.4]
                }]
            },
        })
    },

componentDidMount(){
        let self = this;
        setTimeout(function () {
            self.setState({
                config:{
                    /* HighchartsConfig */
                    xAxis: {
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
                    },
                    series: [{
                        data: [29.9, 71.5, 106.4, 129.2, 144.0]
                    }]
                },
            })
            // chart.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May'],true)
            // chart.series.addPoint({x: 10, y: 12});
            // chart.series.setData([29.9, 71.5, 106.4, 129.2, 144.0],true)
        },3000)
    },

<ReactHighcharts config = {self.state.config} ref="chart"/>

just like this,it works for me.

Answer 3

As stated, you can use react-highcharts. It provides an example of how to update the chart on it's readme page:

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

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