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.