Display dataset values on bar ChartJs 2.1.6

Question

As per chartjs version has changed,The dataset values display on bar itself has not working.The existing code has working with V1.0.2. Ref: how to display data values on Chart.js

var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
    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 - 5);
            });
        })
    }
});

Now what will be modification which must work with ChartJs V2.1.6? The current bar graph syntax has working with V2.1.6 given below.

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: datasets,
            options: {
                responsive: true,
                tooltips: {
                    enabled: false
                },
                legend: {
                    display: false
                },
              //what should add to display values on bar?
            }
        });

score 0 · Answer 1 · answered Feb 15 '17 at 07:07

0

By using the animation.onComplete key, as follows:

animation: {
        duration: 500,
        onComplete: function() {
            var ctx = this.chart.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
            ctx.fillStyle = "black";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset) {
                for (var i = 0; i < dataset.data.length; i++) {
                    for (var key in dataset._meta) {
                        var model = dataset._meta[key].data[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                    }
                }
            });
        }
    }

http://www.chartjs.org/docs/#chart-configuration-animation-configuration

answered Feb 15 '17 at 07:07

chafreaky

90
2
7

I did this and its working but all the labels are centered to the pie chart and it is not displayed similar to tooltip. In tooltip we see "lable: value" but with this approach we only see values. – Ravi Khambhati Oct 03 '17 at 20:53
@RaviKhambhati Simply change the ctx.fillText()'s first parameter – chafreaky Oct 04 '17 at 20:40
@charfreaky thanks for response. Can you please let me know what should be the value of that parameter? – Ravi Khambhati Oct 04 '17 at 21:20
@RaviKhambhati what have you tried so far and what did not work? – chafreaky Oct 04 '17 at 21:30

Display dataset values on bar ChartJs 2.1.6

1 Answers1