Set site-wide defaults (using NPM / module-based JS)

[Michael-Paragonn]

I've pored over https://github.com/apexcharts/vue-apexcharts/issues/105 but can't figure it out, and it's over 3 years old, and it's related to Vue, not plain vanilla JS, so I'm asking pretty much the same question here. ;)

In my main.js file, I have this:

import ApexCharts from 'apexcharts';
window.ApexCharts = ApexCharts;
window.Apex.options = {
    chart:
    {
        height: 350,
        type: 'radialBar',
    },
    plotOptions:
    {
        radialBar:
        {
            hollow:
            {
                size: '70%',
            }
        },
    }
};

In my HTML output (with the variables dynamically set by Twig), I have this:

<div class="chart-01"></div>
<script>
    var options = {
        series: ["42"],
        labels: ['A radial chart!'],
        colors: ['#bada55']
    };

    var chart = new ApexCharts(document.querySelector(".chart-01"), options);
    chart.render();
</script>

This results in a console error that the script Cannot read properties of undefined (reading 'type').

I feel like the fix is pretty simple, but I just don't have the JS-fu to figure it out. Can someone help?

[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.

[Michael-Paragonn]

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.

🤨