Draw horizontal line overlaid on bar graph

[daxliniere]

Hello,
I use a WordPress plugin that displays a bargraph (monthly invoice totals) that I believe is 'powered' by Chart.js. I would like to be able to draw a horizontal line to indicate break-even point. Could someone point me in the direction of documentation on how I could achieve this, please?
(I'm happy to modify the WP plugin, of course. :) )

All the best,
Dax.

[etimberg]

The best way to achieve this is to use https://github.com/chartjs/chartjs-plugin-annotation/

[daxliniere]

Hey Evert, thanks so much for your reply.
I've checked and the WP plugin uses Chart.js v2.9.4, so I've downloaded Chart.js Annotations 0.5.7 as recommended, but I've no idea where to start to install it as a "registered plugin" or even an inline plugin, for that matter.
Is there a guide you could point me towards, please? Or maybe another post where this can been covered? I tried a few searches, but couldn't see how to even use npm with Wordpress. (I didn't think that's how WP worked anyway..?)

Thanks again,
Dax.

[daxliniere]

Wait.. is the npm bit just extracting zip file onto my webserver in the appropriate WP directory??

[daxliniere]

Is it correct that to get it running I just need to extract chartjs-plugin-annotation-0.5.7.zip to my WP installation and somehow call from my functions.php? (Like this??? <script src="/office/wp-content/plugins/sliced-invoices/admin/js/chartjs-plugin-annotation.min.js"></script>)
Then I can move onto calling it from the chart.js instance, right?

[etimberg]

I don't have any experience with wordpress, but you are correct. You just need to include the chartjs-plugin-annotation.min.js file after the main chart.js file and it will be automatically registered as a plugin. After that, you just need to pass the config options when creating the chart.js instance