7👍
You can use the plugin chartjs-datalabels and set the formatter property to set your custom labels.
Created a fiddle for your reference -> http://jsfiddle.net/upmth2cq/1/
Hope it helps!
new Chart(document.getElementById("barChartHeadcount"), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Billed',
backgroundColor: 'rgb(0, 197, 106)',
data: [56, 63, 67]
}, {
label: 'Unbilled',
backgroundColor: 'rgb(255, 114, 107)',
data: [1, 2, 3]
}]
},
options: {
title: {
display: true,
text: 'Community Headcount'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [{
stacked: false
}]
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value){
return value + ' (100%) ';
}
}
}
}
});
Source:stackexchange.com