I want to place a total value at the top of the stacked bar chart in Chart.js.
I have found this code that places the values for both parts of the stacked chart, but I only want a single value at the top of each bar https://jsfiddle.net/1ez0Lo8a/5/
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
Even though this works somewhat, it’s not ideal for what I would like as it re-animates each time you hover – I really would prefer the label at the top to stick there.
As an aside, the animation of the bars upon load has been removed with this code – increasing duration
does not seem to effect. (if you remove this animation
block, the resulting animation is what I want to keep)