Enhancement: allow React context and default chart context property - e.g. from function arguments

[chillyistkult]

I want to trigger the loading animation, how do I trigger showLoading()?

[KacperMadej]

You could access chart instance through context of chart's load event to call showLoading() and hideLoading() on it.

[chillyistkult]

@KacperMadej How do I access react context within this events? For example to check if this.props.loading is true?

events: {
   render() {
      if (this.props.loading) { // How?
         this.showLoading();
      } else {
         this.hideLoading();
      }
   },
},

[KacperMadej]

Have you tried fat arrow function? But then this will not be the chart, so you need to choose, or use a different event to store chart reference in react context.

[chillyistkult]

I tried a lot of things, including arrow function, but with no success. This problem unfortunately applies to any function I would like to use within Highchart context.

I think the right way to do it would be if Chart is just a parameter of the callback function, instead of providing it via this context.

events: {
   render: (chart) => {
      if (this.props.loading) {
         chart.showLoading();
      } else {
         chart.hideLoading();
      }
   },
},

[pawelfus]

That's gonna break backward compatibility (events.render is a callback directly from Highcharts core), confusing much more users than react users. Probably this wrapper could take care of it, but why don't we simply..

Define:

var propLoading = this.props.loading;

Then use it:

events: {
   render: () {
      if (propLoading) {
         this.showLoading();
      } else {
         this.hideLoading();
      }
   },
},

Internal note:
In general, if we decide to replace context in render, then we should replace context for all callbacks to keep them consistent.

[chillyistkult]

In general, if we decide to replace context in render, then we should replace context for all callbacks to keep them consistent.

Please, it would make so much sense!

[ppotaczek]

Currently, the both contexts (React component and chart) in chart functions can be accessed by binding the right this, for example:

constructor(props) {
  this.state = {
    options: {
      chart: {
        events: {
          render: function() {
            const chart = this.chart;
            const component = this;
            ...
          }.bind(this)
        }
      },
      ...
    }
  };
}

chartCallback(chart){
  this.chart = chart;
}

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={this.state.options}
      callback={ this.chartCallback.bind(this) }
    />
  )
}

Live demo: https://stackblitz.com/edit/react-e7gcju?file=index.js