Topic: Pie Chart animation not working in some cases

ActaDennis free asked 4 years ago


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.


Grzegorz Bujański staff commented 4 years ago

Hi. I can't reproduce this bug. I create snippet here: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/1554286 using your HTML and other JS (becouse your code use PHP) and it's working well. Can you create snippet here https://mdbootstrap.com/snippets and reproduce this bug?


ActaDennis free commented 4 years ago

Hello, here's an example https://mdbootstrap.com/snippets/jquery/actadennis/1931561, as you can see, the first chart animation doesn't work properly, but if you remove some blocks (the last one with progress bar for example), it will work again. Edit: I wanna add that it also works if you add blocks, not only if you remove them, for example if you duplicate the progress bar block, the animation works.


Grzegorz Bujański staff commented 4 years ago

It's weird, but when I open your snippet animations works properly.


ActaDennis free commented 4 years ago

I think it depends on the screen resolution, I'm having issues on a 1920x1080 monitor, while it works on the laptop monitor (1366x768)


Grzegorz Bujański staff commented 4 years ago

I tested it on a Full HD monitor and it works fine. I checked it in several resolutions, but I still can't reproduce this error.


ActaDennis free commented 4 years ago

I also tried it on another PC to see if it was a PC problem and I still got the bug on the other one, I don't know why you can't see it. Anyway, I just added as many elements as needed to make it work properly, so it's fine for now.


Grzegorz Bujański staff commented 4 years ago

I'm sorry I couldn't help. i glad you solve this issue in other way.

Best, Grzegorz


Mateo Lesiuk free answered 3 years ago


I had to leave the canvan into a div with forced dimentions :)


Marcin Luczak staff commented 3 years ago

Hi @Mateo Lesiuk,

Thank you for your help :)

Keep coding, Marcin from MDB



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No