How to force animation on chartjs?

Question

I have charts grouped under tab (based on this ) like this: When I reload the page or update values, animation works well. But I would like to start animation when I open tab with charts. Is it possible?

I tried to use chart.update() or chart.render() but nothing work.

Answer 1

Define your chart with a 'this':

this.myChartInstance = new Chart(ctx, { ...

Then use a Javascript call in the:

<li><a data-toggle="tab" onclick="update" href="#menu1">Menu 1</a></li>

and call the script to re-animate ...

function update() {
    this.myChartInstance.update();
}

Answer 2

There is possible solution if you destroy charts and create a new one.

 Chart.helpers.each(Chart.instances, function(chart){
    let ctx = chart.chart.ctx;
    let config = chart.config;
    chart.destroy();
    new Chart(ctx, config);
})

It will get all chart instances so you can easy get config and ctx of charts. Just put this in function what you call when you click on tab.