1

I am using angular-chart.js(which uses Chart.js) to create charts in my angular app. I want to add values on top of the bars in a bar chart. If extending the defaults charts in Chart.js is the only way, can you please provide a reference code?

Meet
  • 11
  • 1
  • 4

2 Answers2

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/

Community
  • 1
  • 1
potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Could you please extend the answer as to show how to pass the callback through the angular-chart options parameter? – aplon May 26 '16 at 17:04
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 ..

Santhosh Racha
  • 1