How can i use dataLabels (not axis labels or tick labels) with the ChartJS plugin?

As the title suggests, I am looking to add data labels to each series of a bar chart. From what I can find this is the best plugin to use - https://chartjs-plugin-datalabels.netlify.app/.

How to do I install/reference the plugin? Or is there a different/better way to show data labels?

Any guidance would be much appreciated :pray:

1 Like

Please elaborate. Do you already have a chart in your app that does not have labels? Include screenshots.

Thanks @ekseptional, I do already have a chart in my app without labels. The chart has been built using advanced mode.

Screenshot of the chart below:

The goal is to show your series names where it currently has “series1” and “series2” et al?

Thanks @raydeck. No, the goal is to show the bar values on the bar iteself. So in Column1 there would be 80% showing in the middle of the blue bar, and 20% in the middle of the orange bar (numbers rounded).

2 Likes

i am wondering the same thing

this is what i want
Screen Shot 2023-06-05 at 1.33.06 PM

and this is what i can create
Screen Shot 2023-06-05 at 1.43.39 PM

while my colors are off because they are not setup yet in weweb, you can see in the first picture that there are value labels outside of each section. this is not natively availble i think. how can we include the datalabels plugin for this to work?

I am using the dataLabels object as a property in the options/plugins object.

1 Like

I have the same question here @ilan @jaredgibb , were you able to find a solution?

Unfortunately not @Amos - seems like there are a few of us with the same goal so hopefully someone is able to share a solution soon…

Is there an update regarding the integration of chartjs-plugin-datalabels? We would be very pleased!

Hello. Is there any update on the topic? I am also searching to do the same thing, but I have found no answer…

Unfortunately nothing that I’ve seen come through @Wirajan