Destroy apexchart

Question

I have 2 functions:
First is init Chart

function init(data, id) {
    let options = {
        series: data[1],
        chart: {
            width: 380,
            type: "donut"
        },
        labels: data[0],
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: "bottom"
                }
            }
        }],
        colors: [primary, success, warning, danger, info]
    };
    var chart = new ApexCharts(document.querySelector("#" + id), options);
    chart.render();
}

Second is load new chart

function loadChart(data, id) {
    initChart(data, id);
}

Il try init chart with new data (new series and labels):
loadChart(data, 'chart_1');
loadChart(new_data, 'chart_1');
How i can destroy chart from my first init?

Answer 1

function init(data, id) {
    if ( document.querySelector("#" + id).hasChildNodes() ) {
        document.querySelector("#" + id).innerHTML = '';
    }

    let options = {
        series: data[1],
        chart: {
            width: 380,
            type: "donut"
        },
        labels: data[0],
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: "bottom"
                }
            }
        }],
        colors: [primary, success, warning, danger, info]
    };

    var chart = new ApexCharts(document.querySelector("#" + id), options);
    chart.render();
}

This was how I did it. I simply just checked if the div had any childNodes. If it did, I cleared it. Simple and it works! Just came across this question when looking for another for apex charts. Guess it's not too common.