Cannot read property 'isCartesian' of null error when setting state from mouseOver

[matsomo]

I'm trying to render a custom tooltip by getting the coordinates from mouseOver
as illustrated here: https://stackblitz.com/edit/react-c5mivs

But whenever I try to set the state in my actual application, I get this error:

TypeError: Cannot read property 'isCartesian' of null at http://localhost:3000/static/js/0.chunk.js:260779:30 at Array.forEach (<anonymous>) at Highcharts.Pointer.reset (http://localhost:3000/static/js/0.chunk.js:260778:32) at H.Chart.redraw (http://localhost:3000/static/js/0.chunk.js:263519:19) at H.Chart.update (http://localhost:3000/static/js/0.chunk.js:271874:17) at t.value (http://localhost:3000/static/js/0.chunk.js:239112:37) at commitLifeCycles (http://localhost:3000/static/js/0.chunk.js:413450:26) at commitAllLifeCycles (http://localhost:3000/static/js/0.chunk.js:414873:11) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:396860:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:396909:20) at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:396963:35) at commitRoot (http://localhost:3000/static/js/0.chunk.js:415078:11) at completeRoot (http://localhost:3000/static/js/0.chunk.js:416607:7) at performWorkOnRoot (http://localhost:3000/static/js/0.chunk.js:416530:13) at performWork (http://localhost:3000/static/js/0.chunk.js:416435:11) at performSyncWork (http://localhost:3000/static/js/0.chunk.js:416409:7) at interactiveUpdates$1 (http://localhost:3000/static/js/0.chunk.js:416697:11) at interactiveUpdates (http://localhost:3000/static/js/0.chunk.js:398980:14) at dispatchInteractiveEvent (http://localhost:3000/static/js/0.chunk.js:401794:7)

Sadly I can't reproduce the error, but it only happens when I run this.setState inside the mouseOver function.

highcharts: 7.0.1
highcharts-react-official: 2.0.0
react: 16.6.3

[ppotaczek]

Hi @matsomo,

It is very hard to debug the problem without reproducing it. The error may indicate a problem with chart.update, so please try to set allowChartUpdate option to false:

    <HighchartsReact
      highcharts={Highcharts}
      allowChartUpdate={false}
      constructorType='ganttChart'
      options={...}
    />

Best regards!

[matsomo]

Hi thanks for the suggestion, however I need the chart to be able to update.

[ppotaczek]

Hi @matsomo,

Please check if allowChartUpdate option resolve your problem, because you can also make that option dynamic:

handleTooltip = (event) => {
  const chart = event.target.series.chart;
  this.allowChartUpdate = false;
  
  this.setState({
    isVisible: true,
    tooltipPosX: chart.plotLeft + event.target.tooltipPos[0],
    tooltipPosY: chart.plotTop + event.target.tooltipPos[1]
  });

  this.allowChartUpdate = true;
};

 ...

    <HighchartsReact
      highcharts={Highcharts}
      allowChartUpdate={this.allowChartUpdate}
      constructorType='ganttChart'
      options={...}
    />

Best regards!

[matsomo]

Hi sorry for my hasty response, this actually solved my problem it seems.¨
Thanks a lot!