How to display value labels above graph bars using chart.js
14,584
I had the same problem and decided to write it. Please get my version of chart.js from my forked version on github: Chart.js
You can pass the following options:
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
}]
};
var opts = {
scaleShowValues: true,
scaleValuePaddingX: 13,
scaleValuePaddingY: 13
};
var chrt = document.getElementById('chrtDemo').getContext('2d');
new Chart(chrt).Bar(barChartData, opts);
scaleValuePaddingX and scaleValuePaddingY will shift the value position so you can fine-tune it.
You can also pass a dataset of colors to color each bar individually:
var barChartData = {
labels: ["January", "February", "March"],
datasets: [{
fillColor: ["rgba(220,220,220,0.5)", "rgba(220,220,220,0.5)", "rgba(220,220,220,0.5)"],
strokeColor: ["rgba(220,220,220,1)", "rgba(220,220,220,1)", "rgba(220,220,220,1)"],
data: [65, 59, 90],
}]
};
Author by
Admin
Updated on June 22, 2022Comments
-
Admin almost 2 years
I am using chart.js,i want to show the label value above the bars, so how do it?
var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,1)", data: [65, 59, 90, 81, 56, 55, 40], }] }
-
nach over 9 yearsThanks, it works but I had to hardcode the X position of the values. The scaleValuePaddingX doesn't work
-
kerbasaurus over 9 years@nach Sorry, I haven't rewritten this for the newest version of Chart.js. This works for the version I needed at the time.
-
nach over 9 yearsno problem, thanks for doing it. BTW did you know how to prevent the rotation when the labels are too long? I want to put them in two lines. Thanks!
-
RocketGuy3 almost 9 yearsI don't suppose this functionality has been added to the master chart.js, has it?