vue-chart-3 | 📊 A simple wrapper around Chart.js for Vue | Command Line Interface library

EDIT: My codesandbox is working, but it's not perfect. In my actual project I've better utilized ts and am just making an if check for the charttype so the font doesn't paste on all the charts you have. I still need to work on making the fontsize responsive and prettier, but I will try and update the codesandbox as much as I can!

If anyone would like to add to it please do! Also, post your link in the comments so anyone else having these issues can see them too!

I am attempting to make a doughnut chart that looks like this:

I've been trying to figure out how to get the code in this example using VueChartJS (VueChart3 is a TS safe rewrite of VueChartJS and works the same, just in composition API), but cannot figure out how to get the plugins to work properly.

vue-chartjs - Doughnut chart with text in the middle

Working Example from post

The example in the post above uses a textCenter() function and constantly access the context ctx variable. The first error I get however reads Property 'pluginService' does not exist on type 'typeof Chart' and also a Cannot read properties of undefined (reading 'register'). I think this has to do with the way VueChart3 and it's Chart.register(...registerables) line.

I've commented out all of the code that breaks the chart currently while I try and fix this issue. I am really stumped on where to go with this now and could really use a bit guidance.

Cheers!

CodeSandbox Link

Chart2.vue