chart.destroy() isn't destroying the chart about chartjs-chart-geo

[sgratzl]

can you provide a standalone example that I can use.

[MrsNickalo]

Will this work? This just creates an empty bubbleMap:
createEmptyChart() { // we must destroy the existing chart before making a new one if(this.chart) { this.chart.destroy(); this.chart = null as any; } this.chart = new Chart("MyChart", { type: 'bubbleMap', data: { datasets: [{ outline: this.states, outlineBackgroundColor: '#EAEAEA', outlineBorderColor: 'black', outlineBorderWidth: 1, showOutline: true, borderWidth: 1, borderColor: 'black', backgroundColor: '#990000', data: [], }] }, options: { plugins: { legend: { display: false }, }, scales: { projection: { axis: 'x', projection: 'albersUsa', }, size: { axis: 'x', display: false } } } }); }

[sgratzl]

I cannot reproduce it https://codepen.io/sgratzl/pen/BaedJmz?editors=0010

[MrsNickalo]

My application is an Angular application using Typescript. As such, I'm not referencing the HTML element like you are. In your Codepen, I see this:
let elem = document.getElementById("canvas");
And you pass that into the new Chart call:
const createChart = (elem) => { return new Chart(elem,
In my application, I am simply referencing the HTML element by its id in the call to new Chart:
this.chart = new Chart("MyChart",
and in my HTML:

I tried to set up a Codepen to demonstrate but was unable to get the TS and Angular stuff to work. Could the issue be that I am referencing the HTML element by id instead of getting the HTML element like you do?
And if that is the issue, why do I only encounter the error with "bubbleMap" and not with "choropleth"?

[MrsNickalo]

Actually, I don't think that's it because even doing it this way:

I still get the same error:

[MrsNickalo]

By moving the elem variable out and making it a component variable, it appears to be working now. Thanks for the assistance.