vue-chartjs | 📊 Vue.js wrapper for Chart.js | Chart library

I cloned a repo from git, and install all the dependences needed, but when runing npm run dev ai got this error for three files:

ERROR in ./resources/js/administracion/ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/Users/davegomez/Desktop/Arco/arco/sistema-arco-v2.0/resources/js/administracion' @ ./resources/js/administracion/ordenesPago.js 3:0-50 7:8-24 8:36-52 @ multi ./resources/js/administracion/ordenesPago.js

the strangest part is that I have already 'vue-confirm-dialog' installed:

This is my Package.json

I am trying to pass the data I get from the backend to echarts using axios but I am not having much luck. Here is my LineChart.js file

I am trying to render a chart in VueJS using ChartJS and the Vue-chartJS wrapper. What I need is to style a specific line segment in a perticular manner(e.g if the value is not available, the line segment will be dashed/ a different color). I have looked over at chart.js documentation which states:

After updating my npm packages, some of the imports from the 'vue' module started showing errors:

TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'

where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.

What I've tried:

• Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of TypeError: Object(...) is not a function errors in console and not rendering the app at all. In the terminal, some new warnings are introduced: "export 'X' (imported as '_X') was not found in 'vue' where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle.
• Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
• Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.

My full list of dependencies:

This is driving me nuts.

I have a chart from vue-chart, chartData is loaded correctly, the chart displays correctly, but options are definitely not taken in account, despite setting them statically at the very end on renderChart call.

This is using vue2/chartjs 2.9.4/vue-chartjs 3.5.1.

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

I have embedded line chart from chart JS in vue js project. However my chart is too big for my page. How can I make it appear small and compact in my webpage? This is the first time I am adding charts to vue js. Any advice or tips will be really helpful for me. Thanks. Here is my code.

I am trying reproduce this project that consists of an app with a back-end component in Flask and a front-end that uses vue-js. The back-end is the following:

I am using vue-chartjs to create charts for my application. I am passing the chartData as a prop. My chart doesn't render at first but does when I resize the window. Here is my code. First the chart component: