score:6

Accepted answer

In highcharts-react-official v2.0.0 has been added allowChartUpdate option, which should work great in your case. By using this option you can block updating the chart with updating the component:

categoryClicked() {
  this.allowChartUpdate = false;
  this.setState({
    ...
  });
}

...

  <HighchartsReact
    ref={"chartComponent"}
    allowChartUpdate={this.allowChartUpdate}
    highcharts={Highcharts}
    options={...}
  />

Moreover, to get the chart instance use refs:

componentDidMount(){
  const chart = this.refs.chartComponent.chart;
}

Live demo: https://codesandbox.io/s/98nl4pp5r4

score:-1 

// react native functional

import React, {useState,  useRef,useLayoutEffect} from "react"
import HighchartsReactNative from '@highcharts/highcharts-react-native'

function chartcomponent(props){
   const [options, setoptions] = useState({});
   const chartRef = useRef(null);
  

  useEffect(() => {
     // create the options for your chart.
     setoptions({chart:{}, yaxis:{}, xAxis:{},})// etc.

  }, []);

  useLayoutEffect(() => {
       
        // new point to add, you can get new data via props, fetch, socket, etc.
        var x = new Date(hr.timestamp).getTime();
        var y = 10 

        // these are the important parts here:    
        var series = chartRef.current.props.options.series;
        if (!Array.isArray(series)){return;}
        var seriesdata = series[0].data;
        seriesdata.push([x,y]);
        // next line limits points in chart to 10, so new poitn replaces first point
        if (seriesdata.length>10){seriesdata.splice(0,1);}

        return () => {};
    }, [props]);


   return(
       <View style={styles.charting}><HighchartsReactNative styles={{height:300, width:600}}  options={options} ref={chartRef} ></HighchartsReactNative></View>


   )
}

Related Query

More Query from same tag