Everything rendered after an Apex pie/donut will disappear if animations are disabled

Code

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"/>

<script>
    const options = {
        chart: {
            type: 'pie',
            width: 400,
            animations: {
                enabled: false
            }
        },
        series: [1,2,3],
    }
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
</script>

This text will not be rendered if animations are disabled!!

Explanation

If animations are disabled (or set to speed=0), everything after the chart div will disappear. The above code demonstrates this. The text after the chart div will be visible for a very short period (flashes).

The same code with animations.speed=10 will work.

[msageryd]

Here’s a link to run the code you wrote, but the issue here is with <div id="chart"/> a self closing div is not valid and ends up parsing what you expect to be sibling elements into children elements. Changing this to <div id="chart"></div> solves this

Thanks @kevinhinterlong. I didn’t realize that this issue got answered. I don’t do much html, so I didn’t know this. Is it generally invalid with self-closing tags, or does it only relate to div?

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.