Chartjs-How to custom index label on each bar chart using chartjs?

by

1👍

Just add the labels in the animationComplete callback

var myLine = new Chart(document.getElementById("bar-chart-js").getContext("2d")).Bar(barChartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                ctx.fillText(bar.value, bar.x, bar.y);
            });
        })
    }
});

I’ve turned off tooltips assuming you don’t need them any longer (since the same information is being shown in the newly added labels). If you need the tooltips, then you need to extend the Bar chart and move the above logic to after each time the chart is drawn.

Fiddle – http://jsfiddle.net/geaje18p/ (I replaced your php echo with hard coded arrays)

enter image description here

Leave a comment