How do I animate a Chart.js chart line?

  • 0
    Good day!

    Designing a web page on which to build an animated sales graph. The graph was built using the Chart.js library. Difficulties arose with the animation of the line itself, which the graph draws. You need to make the line move smoothly like a wave, touching points on the chart, following the example: https: //www.chartjs.org/docs/master/configuration / ... (Apparently outdated documentation, since the code from it doesn't work at all)

    My code:
    var ctx = document.getElementById('myChart').getContext('2d');
    /*** Gradient ***/
    var gradient = ctx.createLinearGradient(0, 0, 0, 500);
        gradient.addColorStop(0, 'rgba(110,0,244,1)');   
        gradient.addColorStop(1, 'rgba(108,0,244,0)');
    /***************/
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Май', 'Июнь', 'Июль', 'Август', 'Сентябрь'],
            datasets: [{
                data: [11, 22, 27, 39, 49], 
                backgroundColor : gradient,   
                borderColor: 'rgba(255, 225, 225, 1)',
                pointColor : 'rgba(255, 255, 255, 1)',
                pointStrokeColor: 'rgba(255, 255, 255, 1)',
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        display: true,
                        color: 'rgba(255, 255, 255, 0.2)',
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                        color: 'rgba(255, 255, 255, 0.2)',
                    }
                }],
            },
            legend: {
                display: false,
            },     
            animation: {
                duration: 1500,
                easing: 'easeInQuint',
                tension: {
                    duration: 1000,
                    easing: 'linear',
                    from: 1,
                    to: 0,
                    loop: true,
                }
            },
        }
    });
    JavaScript Anonymous, Mar 14, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!