chartjs-plugin-datalabels | Chart.js plugin to display labels on data elements | Chart library

I am trying to add datalabels on top of my Bar chart

i am trying to impliment a bar chart what am i doing wrong here?

here also i am getting error saying to use typescript

formatter: (value: number) => value + " %", but i use only .js format

First of all, I would like to say that I'm a student learning programming for around a month, so expect to see many mistakes.

I'm working on a website where I use a chart from the ChartJs library. The data used for this chart is taken through requests to a server. I am working on making requests to the server every X number of seconds, so the data displayed on the chart gets updated automatically without having to refresh or do anything.

I would say I have most of it done, but I have a problem with ChartJs. I have the chart together with the request to server, all in one function which I then call on windows.onload. I have used setInterval to call this function every 5 seconds, and in practice this works, but I get this error :

Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.

So I understand what is happening, I am trying to create the chart over and over again on the same canvas element, and that of course doesn't work. I have seen about the destroy() method and update() method, but I haven't been able to find a solution for my specific case. If anyone could tell me any ideas on how to do this in this case, I would really appreciate it. Here is the code:

I'd like each stacked bar to have their "total" label position just above the entire bar.

I've managed to get the sum, but I'm having trouble positioning the label at the top.

If you notice, the labels are positioned at the bottom:

I've tried playing around with the anchor and offset properties, but I was unable to achieve the desired result.

Code:

I made a radial progress bar using the nested doughnut chart, the object works fine.

I wanted to show the progress on a label, but the label became visible in the data I used as the background.

q1:How can i hide the label i just use as background?

q2:Do you think it is good to make progress bar using chartjs? (real time) I would be very happy if you could provide information about another alternative library.

My code:

I am trying to add labels to each bubble in the bubble chart using chartjs-plugin-datalabels. For each bubble, I want to show the label property of each object of data.dataset array
like "Grapefruit", "Lime". I am getting the value of r for all bubbles. Can we change this label?

I saw examples but did not get them right. I don't know what I'm doing wrong.

I am drawing polar chart with chart.js ^2.8.0 and ng2-charts ^2.3.0 in Angular. I have used chartjs-plugin-datalabels to display labels but this does not support lables outside at fixed positions outside the polar chart rings like this plugin for chart.js display labels outside the pie chart.

CODE:

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:

I am creating 5 sections of gauge using chartjs-gauge. I am using the following data.