Что может быть причиной того, что не удаляется предыдущий кадр при анимации в amcharts5?

Question

[vladimirir]

В проекте на Nuxt 3 поставил библиотеку amcharts5 , через которую рисую график (диаграмма с областями), основанный на данных по датам. Есть несколько табов над графиком, по которым можно приблизить/отдалить график сразу на заданный диапазон дат (табы "Последние 3 года", "Последний год", "Последний месяц"). Когда просто использую ползунок на графике, анимация отрабатывает нормально, когда нажимаю на табы (вызывается метод zoomToDates от объекта xAxis), то при анимации предыдущий кадр не исчезает, а остаётся на графике, из-за чего куча кадров наслаиваются друг на друга. Кто-нибудь сталкивался с подобным? Как решили? Сам код, ининициализирующий график, находится в файле chart.js , который подключается в компоненте, в котором подгружаются данные, сам компонент в , с этим всё в порядке. Ниже код файла chart.js

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";



function initChart(chartEl, chartData) {
    let root = am5.Root.new(chartEl);

    // Set themes
    // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
            am5themes_Animated.new(root)
        ]);

    // Create chart
    // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(
            am5xy.XYChart.new(root, {
                panX: false,
                panY: false,
                wheelX: "zoomX",
                wheelY: "panY",
                paddingLeft: 0
            })
        );

    // Add cursor
    // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
            behavior: "zoomX"
        }));
        cursor.lineY.set("visible", false);


    // Create axes
    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(
            am5xy.DateAxis.new(root, {
                baseInterval: { timeUnit: "day", count: 1 },
                renderer: am5xy.AxisRendererX.new(root, {
                    minorGridEnabled: true,
                    minGridDistance: 70
                }),
                tooltip: am5.Tooltip.new(root, {layer: 10})
            })
        );

        var yAxis = chart.yAxes.push(
            am5xy.ValueAxis.new(root, {
                renderer: am5xy.AxisRendererY.new(root, {})
            })
        );

    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(
            am5xy.LineSeries.new(root, {
                name: "Series",
                xAxis: xAxis,
                yAxis: yAxis,
                valueYField: "value",
                valueXField: "date",
                tooltip: am5.Tooltip.new(root, {
                    labelText: "Доходность: [bold]{valueY}[/]"
                })
            })
        );
        series.set("fill", am5.color('#820744'));
        series.set("stroke", am5.color('#820744'));

        series.fills.template.setAll({ fillOpacity: 0.2, visible: true });
        series.strokes.template.setAll({
            strokeWidth: 2
        });

    // Add scrollbar
    // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
        var scrollbar = chart.set("scrollbarX", am5.Scrollbar.new(root, {
            orientation: "horizontal"
        }));


        series.data.processor = am5.DataProcessor.new(root, {
            numericFields: ["value"],
            dateFields: ["date"],
            dateFormat: "yyyy-MM-dd"
        });

        series.data.setAll(chartData);

    // Make stuff animate on load
    // https://www.amcharts.com/docs/v5/concepts/animations/

        series.appear(1000);
        chart.appear(1000, 100);

        return xAxis;
}

export { initChart };