Hello,

I'm having weird issues where the Pie Chart animation on page load works only in some cases.

I have two Pie Charts on my page with different IDs. If they are the only elements on the page they work with no issues, but if I add other elements (for example other cards), the first Pie animation doesn't work anymore (it loads instantly).

What's even more weird, is that it still works on lower resolutions (1366x768), but doesn't work on higher resolutions (1920x1080).

This is the code of the charts

<div class="row mb-1">
<div class="col-lg-6">
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-pie mr-2"></i> Schede Registri Trattamenti
        </div>
        <div class="card-body">
            <canvas id="pieChart" height="100"></canvas>    
        </div>
    </div>
</div>  
<div class="col-lg-6">
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-pie mr-2"></i> Organigramma Privacy GDPR
        </div>
        <div class="card-body">
            <canvas id="labelChart" height="100"></canvas>
        </div>
    </div>
</div>

/*Pie Chart 1*/
var ctxP = document.getElementById("pieChart").getContext('2d');
var myLabelChart = new Chart(ctxP, {
  plugins: [ChartDataLabels],
  type: 'pie',
  data: {
    labels: ["Schede Registro Titolare", "Schede Registro Responsabile"],
    datasets: [{
      data: [<?php echo $num_reg_tit;?>, <?php echo $num_reg_resp;?>],
      backgroundColor: ["#0061ca", "#46BFBD", "#f2afff", "#6bb2ff", "#949FB1", "#4D5360"],
      hoverBackgroundColor: ["#007aff", "#5AD3D1", "#f7cbff", "#6bb2ff", "#A8B3C5", "#616774"]
    }]
  },
  options: {
    animation: {easing: 'easeInCirc'},
    responsive: true,
    legend: {
      position: 'right',
      labels: {
        padding: 10,
        boxWidth: 10
      }
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return value;
        },
        color: 'white',
        labels: {
          title: {
            font: {
              size: '12'
            }
          }
        }
      }
    }
  }
});

/*Pie Chart 2*/
var ctxP = document.getElementById("labelChart").getContext('2d');
var myLabelChart = new Chart(ctxP, {
  plugins: [ChartDataLabels],
  type: 'pie',
  data: {
    labels: 
<?php
    $counter_labels = 0;
    foreach($array_soggetti as $label)
    {
        if($counter_labels == 0)
        {
            echo '["'.$label[0].'"';
        }
        else
        {
            echo ',"'.$label[0].'"';
        }
        $counter_labels++;
    }
    echo ']';
?>
    ,
    datasets: [{
      data: 
<?php
    $counter_soggetti = 0;
    foreach($array_soggetti as $num)
    {
        if($counter_soggetti == 0)
        {
            echo '['.$num[1];
        }
        else
        {
            echo ','.$num[1];
        }   
        $counter_soggetti++;
    }
    echo ']';
?>
    ,
      backgroundColor: ["#0061ca", "#46BFBD", "#f2afff", "#6bb2ff", "#949FB1", "#4D5360"],
      hoverBackgroundColor: ["#007aff", "#5AD3D1", "#f7cbff", "#6bb2ff", "#A8B3C5", "#616774"]
    }]
  },
  options: {
    animation: {easing: 'easeInCirc'},
    responsive: true,
    legend: {
      position: 'right',
      labels: {
        padding: 10,
        boxWidth: 10
      }
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return value;
        },
        color: 'white',
        labels: {
          title: {
            font: {
              size: '12'
            }
          }
        }
      }
    }
  }
});

Thank you.