I'm showing the value of each segment of my vertical stacked bars using the following code
options: {
animation: {
onComplete: function () {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "center";
ctx.font = "11px Arial";
ctx.fillStyle = "#fff";
Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
Chart.helpers.each(meta.data.forEach(function (bar, index) {
data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y+4);
}),this)
}),this);
}
}
}
Sometimes segments are only a few pixels in height and the texts of the values overlap. I would like to get the height of each segment in order to hide the value when it won't fit.
Original source (horizontal bars) https://codepen.io/jamiecalder/pen/NrROeB