[Chartjs]-Chart.js v3 Fade Animation in delay

by

0👍

✅

I Got it to work as intended! I went back to v2, because v3 brought too much trouble with it.

While tinkering with v3 I realized that my v2 Version worked, because Updating in v2 doesn’t reset the Animation. So my answer is based on that. If you call .update(0) the update happens without the Animation. So I crated this:

setTimeout(function(){
    myChart.config.data.datasets[4].hidden = false;
    myChart.update(0);
    fadeLoop();
}, 2500);

var i = 0.15;

function fadeLoop() {
    setTimeout(function() {
        myChart.config.data.datasets[4].pointBackgroundColor = "rgba(244, 141, 59, " + i +")";
        myChart.config.data.datasets[4].borderColor = "rgba(244, 141, 59, " + i +")";
        myChart.update(0);
        i += 0.05; 
        i = Math.round(i * 100) / 100;
        if (i <= 1) fadeLoop();
    }, 10)
}

Since my Line Fade-in Animation was supposed to start after the Bar animation I initialized the with the hidden attribute. After 2.5 sec I removed the hidden attribute and started the FadeLoop.

I count i from 0.15 to 1 in 0.05 increments every 0.01 sec. In the Loop I Updated the BG and Border Color of my Line and Updated it "without animation".

This is not the most efficient Method, and I don’t recommend it for larger Charts or slow sites. But for me this is sufficient.

3👍

For Chart.js v3 you can use the following animation options:

chart.options.animation = {
  numbers: { duration: 0 },
  colors: {
    type: "color",
    duration: 1000,
    from: "transparent",
  }
}

For v2 I don’t think they provide any fine-grain control over animations. If this is important to you, you might want to update to v3.

Snippet attached to show the effect.

var ctx = document.getElementById('myChart').getContext('2d');

myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['2018', '2019', '2020'],
        datasets: [{
            label: ['x'],
            data: [7.1, 6.6, 6.6],
            backgroundColor: [
                '#05368b',
                '#05368b',
                '#05368b'
            ],
            order: 2
        },{
            label: ['y'],
            data: [6.5, 6.4, 6.7],
            backgroundColor: [
                '#1792d7',
                '#1792d7',
                '#1792d7'
            ],
            order: 2
        },{
            label: ['z'],
            data: [6.1, 5.8, 6.1],
            backgroundColor: [
                '#6c2475',
                '#6c2475',
                '#6c2475'
            ],
            order: 2
        },{
            label: ['n'],
            data: [5.7, 5.8, 5.8],
            backgroundColor: [
                '#0d60b5',
                '#0d60b5',
                '#0d60b5'
            ],
            order: 2
        },{
            label: ['av'],
            data: [4.3, 6.1, 6.3],
            type: 'line',
            lineTension: 0.4,
            borderColor: "#f48d3b",
            fill: false,
            pointBackgroundColor: function() {
                var color = "rgba(244, 141, 59, 1)";
                console.log(color);
                return color;
            },
            pointRadius: function(context) {
                var width = context.chart.width;
                var size = Math.round(width / 42);
                console.log(size);
                return size
            },
            borderWidth: 1,
            order: 1,
            hidden: true,
            borderWidth: 5
        }]
    },
    options: {
        animation: {
          numbers: { duration: 0 },
          colors: {
            type: "color",
            duration: 1000,
            from: "transparent",
          },
        },
        tooltips: {enabled: false},
        hover: {mode: null},
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    color: '#eee'
                }
            }],
            xAxes: [{
                gridLines: {
                    color: '#eee'
                }
            }]
        },
        legend: {
            position: 'bottom',
            labels: {
                padding: 20
            }
        },
        plugins: {
            datalabels: {
                align: 'top',
                anchor: 'start',
                color: 'white',
                // offset: 6,
                font: function(context) {
                    var width = context.chart.width;
                    var size = Math.round(width / 42);
                    return {
                        size: size
                    };
                }
            }
        }
    }
});
<script src="https://unpkg.com/chart.js@3.0.0-beta/dist/chart.min.js"></script>

<canvas id="myChart"></canvas>

Leave a comment