AMCharts 5 legend stays when chart is deleted

Question

I use an AMCharts 5 chart in my Angular project that needs to be removed on a certain action. When I delete the chart, the legend tooltips are still displayed.

Here is the code I use to create the chart:

 this.rootTest = am5.Root.new('test') this.chartTest = this.rootTest.container.children.push( am5xy.XYChart.new(this.rootTest, { panY: false, layout: this.rootTest.verticalLayout }) ); let xRenderer = am5xy.AxisRendererX.new(this.rootTest, { minGridDistance: 30 }); let xAxis = this.chartTest.xAxes.push( am5xy.CategoryAxis.new(this.rootTest, { renderer: xRenderer, categoryField: "category" }) ); let yAxis = this.chartTest.yAxes.push( am5xy.ValueAxis.new(this.rootTest, { min: 0, renderer: am5xy.AxisRendererY.new(this.rootTest, {}) }) ); let series = this.chartTest.series.push( am5xy.LineSeries.new(this.rootTest, { name: 'Serie', xAxis: xAxis, yAxis: yAxis, valueYField: 'yValue', categoryXField: "category", tooltip: am5.Tooltip.new(this.rootTest, { labelText: "{name} {categoryX}: [bold]{valueY}[/]" }) }) ); xAxis.data.setAll([{ category: 'category1' }, { category: 'category2' }]) series.data.setAll([{ category: 'category1', yValue: 10 }, { category: 'category2', yValue: 20 }]) this.chartTest.set("cursor", am5xy.XYCursor.new(this.rootTest, { behavior: "zoomX" })); let legend = this.chartTest.children.push(am5.Legend.new(this.rootTest, {})); legend.data.setAll(this.chartTest.series.values);

And here is how I delete it:

this.rootTest.container.children.clear();

I only get this when adding a cursor to my chart.

Is there a way to remove those tooltips?

Before deleting After deleting

Answer 1

I had the same problem that I managed to fix. I advise you to refer to this issue and check the root.dispose() function.