Apexcharts <svg> attribute height: Expected length, "NaN" when loading other page

Question

I have a simple chart generated with ApexCharts v3.45.1. This is on a single page application where when I fetch another page via an AJAX call, the original chart in the DOM is removed on purpose (using knockout's data-bind if statement).

In the stacktrace, it seems the apexchart's redrawOnParentResize is being triggered, and when it finds the node is no longer there, it has a height of "NaN" under:

key: "setAttrs"
value: function(t,e) -> t.setAttribute(i, e[i])

It's trying to redraw a chart which no longer exists before I even had the time to destroy it.

Spent some time trying to find a resolution. I can set redrawOnParentResize and WindowResize both to false. This fixes the issue, but the chart will not resize dynamically.

I did implement a solution which seems to work by initiating a ResizeObserver BEFORE the chart is rendered. The purpose here is to destroy the chart if it becomes hidden/removed from the DOM.

 self.chart = new ApexCharts(element, options);

    setTimeout(function () {
    
    new ResizeObserver(function (ele) {
        var height = ele[0].contentRect.height;
        if (height == 0) self.Destroy();
    }).observe(element);

    self.chart.render();
   }, 200);

Is this a bug in Apexcharts or is there a better way of handling this?

Answer 1

In svelte I had same issue and solved by destroying chart with onDestroy

import { onDestroy } from 'svelte';

onDestroy(()=>{
    chart.destroy();
});