CODEWITHSUNDEEP
javascriptreactjshighcharts
NHa
NHa

Reputation: 57

Why I cant put the highcharts.chart in render?

var temp = React.CreateClass({
    getConfig: function(data){
         //somecode and return a config for highchart
    },
    render: function() {
        var config = this.getConfig(this.props.Data);
        Highcharts.chart("idname", config);
        return (<div id="idname"></div>);
    }
});

With this kind of code, that is put Highcharts in render function, there is an error: Highcharts error #13

If I change the code to following type it will be Ok. The chart will be ok and no error.

var temp = React.CreateClass({
    componentWillReceiveProps: function(data){
         //somecode and get the config for highchart
         Highcharts.chart("idname", config);
    },
    render: function() {
        return (<div id="idname"></div>);
    }
});

My question is: can I put the Highcharts.chart("idname", config) in render function as the first situation. If it is ok, how? If I can not put the Highcharts.chart("idname", config) in render function, why?

Upvotes: 1

Views: 457

Answers (1)

Prabodh M
Prabodh M

Reputation: 2262

First Scenario

var temp = React.CreateClass({
    getConfig: function(data){
         //somecode and return a config for highchart
    },
    render: function() {
        var config = this.getConfig(this.props.Data);
        Highcharts.chart("idname", config);
        return (<div id="idname"></div>);
    }
});

The error is due HightChart is not able to find the target HTML to render the charts. It clearly states if you follow the error page. In your first scenario you are calling the HighCharts before rendering the DOM. So your highchart is clearly unable to find the element there. First render your element, then apply the charts over it.

Second scenario

var temp = React.CreateClass({
    componentWillReceiveProps: function(data){
         //somecode and get the config for highchart
         Highcharts.chart("idname", config);
    },
    render: function() {
        return (<div id="idname"></div>);
    }
});

You are creating charts in react hook componentWillReceiveProps, which is called when render is completed. So Highchart is able to find the target id to bind the charts.

One caveat in calling this hook is, componentWillReceiveProps() is invoked before a mounted component receives new props. If there are no new props, it doesn't guarantee to be called. You should use componentDidMount() hook, which gets called if your render has finished its job. Check the docs

Hope this Helps !

Upvotes: 1

Related Questions