Use Chartjs-Annotation-Plugin without using "import"

Question

Is there a way to use the newest version of the chart-annotation-plugion as an inline plugin? How I currently do it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-annotation.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-beta.1/chartjs-plugin-datalabels.min.js" ></script>  

But in newer versions of ChartJS you need to register your plugins, but I dont think the plugin has a global property to register it, like the datalabel plugin (https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation) has.

Here are the docs for the annotation plugin: https://www.chartjs.org/chartjs-plugin-annotation/guide/integration.html.

Any help is greatly appreciated.

Answer 1

Late to the party but I don't see a response yet and I was also having trouble figuring it out.

Simply include

<script>
Chart.register('chartjs-plugin-annotation');
Chart.register('chartjs-plugin-datalabels');

// ... rest of your code
</script>

somewhere near the top of your scripts after your CDN imports.

As per the Chartjs plugin documentation, this will work with any plugin that follows the naming convention chartjs-plugin-*

Edit: Adding a working example; credit to @dennis-bauszus for most of the chart layout. https://codepen.io/jarrilla/pen/OJjMVEo