On the chart js documentation,you can run the functions when the animation completes using onAnimationComplete : function(){}

Fiddle defined


Your html file maybe like this

<canvas id="my_chart"></canvas>

Then your js file may look like this

fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [60, 80, 81, 56, 55, 40]

 var ctx = document.getElementById("myChart1").getContext("2d");
    var myLine = new Chart(ctx).Line(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {
         //Your other ChartJs features defined here

var ctx = this.chart.ctx;
        ctx.font = //your font
        ctx.fillStyle = //your text color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, points.y - 10);//You can change the x and y position of the text as per your requirement

//Full attribution goes to the author and the thread


The following answer only works for Chart.js v2.
If you want a v1 solution, check pritishvaidya's.

You want to use the animation property of the chart options :

options : {
    animation: {
        duration: 500,
        onComplete: function () {
            // The code here will be executed at the end of the animation 
            // (after 500ms here)

            // You can get the canvas context using the following :
            var ctx = this.chart.ctx;
            // `this` being the chart instance

Now you want to add the value of the point above it, which can be done using the data model, which you can find in the dataset properties :

onComplete: function() {
    // You get the canvas context, to help you writing what you want
    var ctx = this.chart.ctx;

    // Here you set the context with what you need (font, size, color ...)
    ctx.font = Chart.helpers.fontString(, 'normal',;
    ctx.textAlign = 'center';
    ctx.fillStyle = 'black';

    // For every dataset ... {

        // For every data in the dataset ...
        for (var i = 0; i <; i++) {

            // We get its model
            var model = dataset._meta[0].data[i]._model;

            // And write the data above it
            ctx.fillText([i], model.x, model.y - 2);
            // You can edit the last two arguments according to what you need

Follows the result of the above code, which you can find on this jsFiddle :

enter image description here

Related Query

More Query from same tag