Hiding/Showing multiple datasets at the same time causes animation glitch

[tqwewe]

Expected behavior

Datasets should animate at the same time when running chart.hide(0); chart.hide(1); chart.hide(2);.

Current behavior

The animation is glitched, and some of the datasets don't fade out, but instead immediately disappear.

Reproducible sample

https://jsfiddle.net/jqgatsk8/

Optional extra steps/info to reproduce

Using the codepend template, simply adjust the JS to:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      },
      {
        label: '# of Foos',
        data: [8, 12, 3, 19, 12, 4],
        borderWidth: 1
      },
      {
         label: '# of Bars',
         data: [1, 2, 3, 4, 5, 6],
         borderWidth: 1
       },
    ]
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const c = new Chart(ctx, options);

c.hide(0);
c.hide(1);
c.hide(2);

Possible solution

No response

Context

No response

chart.js version

v4.4.2

Browser name and version

Chrome

Link to your project

No response

[LeeLenaleee]

Please add a reproducible sample as required per the issue template. Because when I try this it works fine: https://jsfiddle.net/xo75mvaf/

[tqwewe]

@LeeLenaleee here's a modified version of your fiddle: https://jsfiddle.net/jqgatsk8/