(Gantt Chart) Cannot read property 'isCartesian' of null

[matsomo]

Bug or Feature Request?

Bug

Description

This error happens when I'm calling this.setState from the plotOption > series >point > events > mouseOver event.

I'm not able to reproduce the error, but I've solved it in another chart where I'm using highcharts-react-official. I'm stopping the chart from updating while setting the state using a property called allowChartUpdate.

Is there anything equivalent to allowChartUpdate in react-jsx-highcharts?
Thanks!

Versions

• React JSX Highcharts version: 3.3.0
• Highcharts version: 7.0.1
• React version: 16.6.3

[whawker]

Without any code to replicate the issue it's difficult to say.

At a guess this is likely an issue with the scope of this in your mouseOver event handler, it will be referring to your React component, not the this that Highcharts expects.

I.e. this will not work, as the arrow function binds the scope of your mouseOver handler to be the React component

render () {
  const plotOptions = {
    series: {
      point: {
        events: { mouseOver: () => { // Do something } }
      }
    }
  }

  return (
    <HighchartsChart plotOptions={plotOptions}>

Instead try this

render () {
  const plotOptions = {
    series: {
      point: {
        events: { mouseOver: function () { // Not an arrow function, "this" scope unchanged  } }
      }
    }
  }

  return (
    <HighchartsChart plotOptions={plotOptions}>

[matsomo]

This is the original issue I solved with the allowChartUpdate property: highcharts/highcharts-react#85

And this is an example showing what I'm trying to do, sadly without reproducing my problem:
https://stackblitz.com/edit/react-c5mivs

In this example I used the tooltip positions, now I've moved on to using Popper.js with an anchor element. Either way I need to set some properties in the state. Even if I didn't use an arrow function, wouldn't I have to bind the function to this anyways?

render () {
  const plotOptions = {
    series: {
      point: {
        events: { mouseOver: function (e) {
              // now able to access this.setState({...})
            }.bind(this) 
         }
      }
    }
  }

  return (
    <HighchartsChart plotOptions={plotOptions}>

thanks

[whawker]

I notice that you are using a Gantt chart in that example, React JSX Highcharts does not currently support Gantt charts (see #174).

I'm not sure I can really offer much help on this issue until it does.

[beckerei]

I'm using the same event and having a few difficulties with it as well.
mouseOver is triggered quite often by highcharts, in your example it results in a a lot of rerenders, that's why preventing the chart from rerendering helps.