How to Add Data Labels within Bars and Total Sum On Top of Bar Chart in Chart JS

[@jtkw]

Thanks for all your videos on Chart.js! I tried, but this seems not to work when you have complex data structure such as those used to generate multiple lines in a line chart. place plugins: [ChartDataLabels] does NOT show the actual data value. It only shows the first item in the data array, plus the name of the second item in the data array, followed by "[object.Object]". Am I doing something wrong?

[@ciarangriffin6133]

Excellent video!

[@aliFarooq-dg5fx]

i want to add negative values below the 0 but it start cutting the edges with in the bar

[@Ali-in3br]

Should this method work with react-chartjs-2 as well? Currently I’m getting an error saying “Cannot read properties of undefined (reading ‘data’)”

[@sarahfowler9741]

For anyone else pulling their hair out about this, you HAVE TO access `chart.getDatasetMeta`, not deconstruct it. It's possible that it just loses the context for `this` when you deconstruct (I never use `this`, so I don't know all the pitfalls)

[@hasbullahali9608]

Hi want to ask, how to set the colour of sum value text with condition, example if sum below 10, the text will be in red color, if sum over 10 will blue colour

[@billionsuper]

Great example, thank you very much.

[@MeghaShree-Jayaram]

How do we do place total at the right end for indexaxis as y.Meaning when we have horizontal stacked bar chart.

[@ChartJS-tutorials]

This video would help: kzbin.info/www/bejne/opXTmHd7jsiDra8

[@gregdominguez5528]

Great video, but as usual, because I'm using a datastructure created from a CSV file, this code does not work for me. I receive an error: "Cannot read properties of undefined(reading 'y')". Any idea on how to fix this?

[@Blazeplay20]

is it possible to hide red sales / black sales number, leaving the total sum only?

[@mcLovinHere]

Hello! Will the code be different if live the red and black bars side by side on the X axis? And is it possible to do without chartDataLabels? upd: Thanks the answer! There is one more) Is it to change the color of numbers when is a difference, that is, if a negative number makes it red, if it is positive, then green. Is there such functionality Chart js?

[@ChartJS-tutorials]

Yes the code will be different as we need to add the sum to the center of the column in that case. We can create custom plugin for this. I will cover a video about this soon.

[@massyang4586]

Hello and thank you for the video! Is it possible to make click event and get x-axis label value?

[@indrajeetyadav8426]

Hi Thanks for video and showing us how to do. I have a question here as you did the grace part in the video which extends the y-axes to 25 what if the stacked bar chart is showing percentage and we can use it up to 100 so adding more to the y-axes doesn't seems good. can we do the internal padding like thing using layout or something such that it adds space between the chart total at top & legend ?

[@ChartJS-tutorials]

Hi Indrajeet, thank you for your question. I am correct you are looking this space between legend and the chart area? If so this video should answer your question: kzbin.info/www/bejne/bmjVn4CwerOaabc

[@indrajeetyadav8426]

@@ChartJS-tutorials Yes. Thanks you.

[@L-Lesiv]

and how to put total on right of avery bar for horizontal chart?

[@Nekromant991]

Hello and thank you for the video! Is it possible to rotate the total sum labels?

[@Hjellos]

Hi! How do we do the same using chart.js version 4.4?

[@ChartJS-tutorials]

In Chart.js 4 it will work as well po. It is the same. This is the canvas API code which Chart.js uses to build their charts.

[@Hjellos]

I only got this to work after downgrading to same chart.js version as you used... Will retry again in case I did something wrong in my code.@@ChartJS-tutorials

[@Hjellos]

Confirm all working well as you said!

[@imawc]

Thanks for the great video, is it possible to change the total value by switching Legend?

[@BrunoRomeo1]

Excellent video tutorial, I would like to know if it is possible to put the percentage in the lebels. For example, total 100 on top of the bar and in the middle the percentage, Dataset 1 25%, Dataset 2 25%, Dataset 3 25%, Dataset 4 25%.

[@amintalukder7189]

Can I use it with vuejs please

[@WHAATYEAAHOKAAY]

This does not work if one of the bars only has 1 series value. The top label appears at the bottom.

[@ChartJS-tutorials]

Try this one: kzbin.info/www/bejne/p3asXqpmmdhpoJY&ab_channel=ChartJS That was an updated version if I am not mistaken covered your case.