I have created a dashboard system using ApexCharts with a sidebar that is supposed to expand horizontally when hovered over. Initially, with only one chart, the sidebar animation worked as expected. However, after adding more charts, the sidebar no longer expands, and the charts do not resize as intended.

Here is a link to my codesandbox project.

I suspect this is a performance issue caused by redrawing the graphs multiple times during the animation.

One approach I tried was to delete the charts when the sidebar animation starts and redraw them once the animation finishes. However, this causes issues. For instance, if I apply any filters or zoom in/out on the charts, they revert to their default options after the sidebar animation completes.

document.querySelector(".sidebar").addEventListener("transitionstart", function(event) {
    if (event.propertyName === 'width') {
        chart3.destroy();
        chart2.destroy();
        chart.destroy();
    }
});

document.querySelector(".sidebar").addEventListener("transitionend", function(event) {
    if (event.propertyName === 'width') {
        // Recreate and re-render charts
        chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
        chart3.render();
        chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
        chart2.render();
        chart = new ApexCharts(document.querySelector("#chart1"), options);
        chart.render();
    }
});

Does anyone have any ideas why the sidebar is behaving this way and how I can debug this issue?