I integrated an AMCharts 5 chart into my Angular application that requires removal upon a specific action. However, even after deleting the chart, the legend tooltips continue to be displayed.
Below is the code snippet used to generate 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);When attempting to remove the chart, I use the following line of code :
this.rootTest.container.children.clear();This issue only arises when a cursor is added to the chart. Is there a method to eliminate these tooltips?
View before removing the chart View after removing the chart