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],
  }]
}

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],
  }]
}

• javascript
• jquery
• chart.js

1 Answer 1

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],
  }]
};