Как анимировать линию графика Chart.js?

Question

[Дмитрий Г]

Разрабатываю веб-страницу, на которой нужно построить анимированный график продаж. График построил с помощью библиотеки Chart.js. Сложности возникли с анимацией самой линии, которую строит график. Необходимо сделать так, чтобы линия плавно двигалась как волна, соприкасаясь с точками на графике по принципу примера: https://www.chartjs.org/docs/master/configuration/... (Видимо устаревшая документация, т.к. код из нее не работает вообще)

Мой код:

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

Comments

[RAX7]

Так там бета версия либы используется Chart.js v3.0.0-beta.3, поэтому пример и работает.