Access State variable in highcharts event load function

Question

export class GraphComponent extends React.Component{
    constructor(){
        super();
        this.state={data:[],data20:[]};
    }

    render(){
        var Highcharts='Highcharts';
        let self=this;
        var conf={
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],i=0,j=1,k=0;
                        var p=self.state.data; // Access State variable here
                    }
                }
            }
            series: [{
            name: 'Random data',
            data: this.state.data20 / Accessible Here
            }]
        }
        return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
    }
}

{"data":[{"x":154745486745,"y":0.5} // some 50-60 objects like this]}

I am getting this data from JSON/SERVER into state.data20(first 20) and state.data(rest of them). state.data20 are plotted. state.data is not Accessible in the Charts event load function. I have tried few methods but still failed.

With Self reference Image

Without Self reference Image

This answer may help you: https://stackoverflow.com/a/54858097/3770366 — Gaurav Rami, Jun 10 '19 at 09:15

João Menighin · Answer 1 · 2018-05-16T16:52:09.800

0

Try saving a reference do this on a variable. Check it out:

export class GraphComponent extends React.Component{
    constructor(){
        super();
        this.state={data:[],data20:[]};
    }

    render(){
        var Highcharts='Highcharts';

        // Declare a variable to keep a reference to react context
        let self = this;

        var conf={
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],i=0,j=1,k=0;
                        var p = self.state.data; // Access State variable using self
                    }
                }
            }
        }
        return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
    }
}

edited May 16 '18 at 16:52

answered May 16 '18 at 16:43

João Menighin

3,083
6
38
80

No Its not Working. While adding self in the load function the whole graph gets awkward. – Jitendra kumar May 17 '18 at 06:11
while adding Self reference the whole graph is zoomed in than normal and wont work. – Jitendra kumar May 17 '18 at 06:20
Please explain what do you mean by saying that *the whole graph gets awkward*? Could you provide a screenshot? – Kamil Kulig May 17 '18 at 15:37
Also, could you provide the data you are pushing into the chart? I want to point out that if you are using the `load` event to simply load your series, you can (and should) do that on the `series` options of the chart, instead of the load function – João Menighin May 17 '18 at 15:49
Updated the question – Jitendra kumar May 17 '18 at 16:34
@JoãoMenighin I am trying for Dynamic data. – Jitendra kumar May 17 '18 at 16:35
You still shouldn't need the `load` function callback. React is, well, reactive. So just by changing the `this.state.data` it should reactively update your view. Try removing the load part and see if whatever is wrong goes away. – João Menighin May 17 '18 at 16:41
Yeah I am Setting state data from server in componentDidMount. So it wont load every time. After getting the data into the this.state.data i want to pass it into load so i can iterate there – Jitendra kumar May 17 '18 at 18:21
Why do you need to iterate there? And what is wrong with the images you posted? The way to access the react context there is just like I showed you, using the `self`. Is there any errors on the console? – João Menighin May 17 '18 at 18:40
Check the images once again the chart is zoomed In When Self reference is used. yeah What u said is correct but the chart is not working..!! No errors in Console – Jitendra kumar May 18 '18 at 03:09

Access State variable in highcharts event load function

1 Answers1