Angular-chartjs Data labels over bar chart

Question

I am trying to create a bar chart using angular-chartjs and I need a data labels to be visible over each bar chart

I have tried following code in js:

 $scope.pendedLineCountOption = {
                    series: ["series1", "series2"],
                    options: {
                        legend: {
                            display: false
                        },
                        showTooltips: false,
                        animation: {
                            onComplete: function () {

                                var ctx = this.chart.ctx;
                                ctx.font = this.scales.font;
                                ctx.fillStyle = this.scales.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 - 5);
                                    });
                                })
                            }
                        },
                    },
                    data: [[10, 20, 30]], // data array
                    labels: ["one", "two", "Three"], //array
                    header: "Header"
                };

Html Code is as follows:

 <canvas id="pended_bar" class="chart chart-bar" chart-data="pendedLineCountOption.data" chart-labels="pendedLineCountOption.labels" chart-options="pendedLineCountOption.options" chart-series="pendedLineCountOption.series" chart-legend="true"></canvas>

above code is giving datasets undefined error. and data labels are not visible.

please help.

Andrei Andrei · Accepted Answer · 2017-07-28T06:47:26

Try this options:

hover: {
    animationDuration: 0
},
animation: {
    onComplete: function () {
        var ctx = this.chart.ctx;
        var metaInfo = null;
        ctx.font = '12px "Helvetica Neue", Helvetica, Arial, sans-serif';
        ctx.fillStyle = 'gray';
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        _.forEach(this.config.data.datasets, function (dataset, i) {
            metaInfo = dataset._meta[Object.keys(dataset._meta)[i]];
            _.forEach(metaInfo.data, function (bar) {
                ctx.fillText(scope.data[bar._index], bar._model.x, bar._model.y);
            });
        })
    }
},
tooltips: {
    enabled: false
}

_ - lodash library (you can use forEach like your code above)

I am using version 1.1.1 of angular-chart.js

Angular-chartjs Data labels over bar chart

1 Answers