Question

14

How to show data values or index labels in ChartJs (Latest Version)

rated 0 times [ 20] [ 6] / answers: 1 / hits: 19151 / 8 Years ago, wed, july 13, 2016, 12:00:00

How to show data values or index labels in ChartJs (Latest Version) as in the below image:

I am using the ChartJs to display charts in my React Project. Everything is working fine, except this.

I found an answer in stackoverflow (https://stackoverflow.com/a/31632707), But it uses an old version of chartjs and is not working on the one which I am using.

My ChartJs Code:

var ctx = document.getElementById(myChart);



var BarChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: [Jan,Feb,March],

        datasets: [{

            label: Chart Data,

            data: [10,20,15],

            backgroundColor: red,

            borderColor: green,

            borderWidth: 1

        }]

    },

    options: {

        legend: {

            display: false

        },

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero: true

                }

            }],

            xAxes: [{

                ticks: {

                    maxRotation: 180

                }

            }]

        }

    }

});

I tried adding it using the function: ctx.fillText(bar.value, bar.x, bar.y - 5);, But its showing .fillText is not a function

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesseh

Add To Favorites

Follow

Total Points: 579

Total Questions: 98

Total Answers: 99

Location: Reunion

Member since Mon, Dec 28, 2020

3 Years ago

answered 8 Years ago jaredsages · Accepted Answer

Finally I got it working.

Used the following code in the onComplete() function:

animation: {

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

                }

            }

        });

    }

}