I have an application that uses chart.js which works.
I wanted the ability to zoom-in on areas and decided to do this with chartjs-plugin-zoom. However when I load the scripts, I get an error (and zooming doesn't work).
It never executes any of my code - it's all going wrong in the tags loading the files:
<html>
<head>
<title>Charts</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.3.3/dist/chart.js"
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.js"></script>
</head>
<body>
Hello, World!
</body>
</html>
When I try this (Firefox, Chrome), it throws TypeError: e.Chart is undefined when loading the chartjs-plugin-zoom module.
It appears that "global.Chart" isn't defined when executing the fourth line of code - the factory(...) call.
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChartZoom = factory(global.Chart, global.Hammer, global.Chart.helpers));
I have tried other CDN repositories, and hosting the downloaded files locally. The result is the same.
What have I missed?
