Removing chart on click event produces errors

I have a click event that causes my page to change the view. The problem is that when the chart is removed it produces errors for various reasons depending on use case.

For instance this fiddle

outputs Cannot read property 'currentStyle' of null when clicking on one of the bars.

I have another use case with custom tooltips that triggers Cannot read property 'removeHoverStyle' of null

I’m sure there just need to be some null/undefined checks but not sure where to start looking and was hoping someone could provide some guidance.

Thanks

[aemc]

My wrapper chart looks like this

function BarChart({ chartId, options }) {
  const classes = useStyles();
  const { t } = useTranslation();

  useEffect(() => {
    const myChart = new Chart(chartId, options); // instantiate a new chart
    return () => {
      console.log('destroying chart...', chartId);
      myChart.destroy(); // destroy chart on component unmount
    };
  });

  return (
    <canvas className={classes.chart} id={chartId} data-testid={chartId}>
      <p>{t('noCanvasSupport')}</p>
    </canvas>
  );
}

In my options object that I pass in, I have an onClick callback function that changes one of the parent’s state variables (a boolean). This boolean renders another chart if true and removes the current chart

Parent.js

...
return (
<>
    {isTrue && <Barchart />} // throws error as soon as isTrue becomes false
    {!isTrue && <Barchart />}
</>

I seem to be getting this error when isTrue is changed to false and the first Barchart is unmounted. The removeHoverStyle gets called for some reason @ryan-morris

I’ve also posted on stackoverflow: https://stackoverflow.com/questions/57314992/removing-chart-on-click-event-produces-removehoverstyle-of-null-error

[ryan-morris]

@aemc I’m not very familiar with react. Depending on how your chart is removed, you may be able to destroy the chart in the componentWillUnmount of its parent. The overall idea being to tap into an event available in react that lets you know just prior to it being removed from the DOM