[Chartjs]-How to add index labels(on top of bar charts) in Chart.js

by

4👍

✅

You can use the answer here how to display data values on Chart.js and modify the callback function slightly to show the index values instead of the values

...
this.datasets.forEach(function (dataset) {
    dataset.bars.forEach(function (bar, i) {
        ctx.fillText(i + 1, bar.x, bar.y - 5);
    });
})
...

The callback can be passed in via the angular-chart options parameter. You won’t be extending the chart type, so you won’t need to register a new directive with angular-chart.

Fiddle – http://jsfiddle.net/zkqu7tsp/

0👍

This is the onAnimationComplete callback for angular-chart options

onAnimationComplete: function () {
        var chart = this.chart;
        var ctx = this.chart.ctx;
                                                                     this.datasets.forEach(function (dataset) {
         dataset.bars.forEach(function (bar, i) {
         console.log(bar)
             ctx.fillText(bar.value, bar.x, bar.y - 5);
         });
     })

Hope this helps you ..

Leave a comment