Chartjs-Chart.js Console JS Error while destroy the Chart on click event

WARNING: This solution makes sense only if you’re not using the legend plugin or don’t need to handle legend item click event.

In my case I was getting this error even though I disabled legend plugin in chart options, like this:

plugins: {
  legend: {
      display: false
    }
  }

The error stopped happening after I filtered events handled by the legend plugin, like this:

plugins: {
  legend: {
      display: false,
      events: [] // this line was the key
    },
  }

I came accros the same issue, reason for the exception is:
Inside the onclick event if you try to destroy the same chart, chart reference becomes null before the event callback function returns. And that’s why exception is thrown.
You can fix this by destroying the chart instance after the event callback is completed i.e. using setTimeout function you can destroy the chart after 100ms or so. you can do it like this:

    options: {
    onClick: function (evt, element) {
        if (element.length > 0) {
            const categoriesChart = config.categoriesChart;
            let activeBarIndex = element[0].index;
            categoryLabel = categoriesChart.data.labels[activeBarIndex];

            setTimeout(() => {
                // destroy any chart instances that are created
                if (categoriesChart instanceof Chart) {
                    categoriesChart.destroy();
                }

                //$('#how_i_spend_canvas').replaceWith($('<canvas id="SelectedCategory" height="400px"></canvas>')); //replace current canvas
                // Code to draw Chart
                config.monthlyChart = new Chart(ctx, {
                    type: 'bar',
                    data: howISpendChartdata,
                    plugins: [ChartDataLabels],
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        aspectRatio: 2,
                        plugins: plugins,
                        scales: scales,
                        onClick: function (e, activeElements) {
                            //get the colors for bars 
                            if (activeElements.length > 0) { // check the element is selected
                                const monthlyChart = config.monthlyChart;
                                monthlyChart.options.animation.colors = false;
                                monthlyChart.update();
                            }
                        }
                    }
                });
                config.monthlyChart.render();
            }, 100);
        }
    }
}

Below is solution for anyone facing similar problem:

options: {
    onClick: function (evt, element) {
        // get the require data from click event 
        let chart = Chart.getChart(e.chart.canvas.id);
        const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
        if (points.length) {
            const firstPoint = points[0];
            const elementIndex = firstPoint.index;
            const datasetIndex = firstPoint.datasetIndex;
            const dataset = chart.data.datasets[datasetIndex];
            const datasetFieldLabel = dataset.label;
            const itemLabel = chart.data.labels[elementIndex];
            const itemValue = dataset.data[elementIndex];
            
            setTimeout(() => {
                // destroy the chart
                // Render another chart
            }, 100);
        }
    }
}