angular-chart.js : how to show numbers in each bar of stacked bar chart

Question

I am using angular-chart.js to draw some charts. We know now chart.js supports stacked bar chart. But I have not found how to show numbers in each bar, like following: From above pic we can see each bar has number on it. Does anyone know how to realize that in angular-chart.js?

Answer 1

You can do this, it will be displayed as a tooltip,

 ctrl.socialChart = {
      options : {
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      },
      type: 'StackedBar',
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
        colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
        data : [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ]
    }

DEMO

Answer 2

You can show numbers in each bar of stacked bar chart by adding this code in your options function

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);
            });
        });
    }
}