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

[Michael-Paragonn]

I've pored over #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?