title: ChartJS is slow
body: <p>So I get all my data from my SQL database (mariaDB), and when I create my Pie chart with 100 data rows or somthing like that everything is fine. BUT when I load 5000 results into it, it starts lagging or being really slow, and I was wondering if this is due to my JS code or just ChartJS itself?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;canvas-holder&quot; style=&quot;width:100%&quot;&gt;&lt;div class=&quot;chartjs-size-monitor&quot;&gt;&lt;div class=&quot;chartjs-size-monitor-expand&quot;&gt;&lt;div class=&quot;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;chartjs-size-monitor-shrink&quot;&gt;&lt;div class=&quot;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;canvas id=&quot;chart-area&quot; style=&quot;display: block; width: 762px; height: 381px;&quot; width=&quot;762&quot; height=&quot;381&quot; class=&quot;chartjs-render-monitor&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>/**
   * Creates a PieChart overview of results
   *
   * @param {number} pass                 Amount of passed results
   * @param {number} fail                 Amount of failed results
   * @param {number} notRun               Amount of not run results
   * @param {number} err                  Amount of error results
   * @param {number} nA                   Amount of not applicable results
   * @param {number} percentagePassed     Percentage of passed amount
   * @param {number} percentageFailed     Percentage of failed amount
   * @param {number} percentageNotRun     Percentage of not run amount
   * @param {number} percentageError      Percentage of error amount
   * @param {number} percentageNA         Percentage of not applicable amount
   */
  function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {
  
      window.chartColors = {
          red: '#dc3545',
          green: '#1cc88a',
          blue: '#4e73df',
          yellow: '#f6c23e',
          black: '#5a5c69'
      };
  
      var config = {
          type: 'pie',
          data: {
              datasets: [{
                  data: [
                      nA,
                      err,
                      notRun,
                      fail,
                      pass
                  ],
                  backgroundColor: [
                      window.chartColors.black,
                      window.chartColors.yellow,
                      window.chartColors.blue,
                      window.chartColors.red,
                      window.chartColors.green,
                  ],
                  label: 'Dataset 1'
              }],
              labels: [
                  percentageNA + &quot;% NA&quot;,
                  percentageError + &quot;% Error&quot;,
                  percentageNotRun + &quot;% Not Run&quot;,
                  percentageFailed + &quot;% Failed&quot;,
                  percentagePassed + &quot;% Passed&quot;
              ]
          },
          options: {
              responsive: true
          }
  
      };
      window.onload = function() {
          var ctx = document.getElementById('chart-area').getContext('2d');
          window.myPie = new Chart(ctx, config);
      };
  }
  </code></pre>
  <p><strong>SUGEGESTIONS FROM COMMENT</strong></p>
  <p>The user @scx suggested to look at this page: <a href="https://www.chartjs.org/docs/latest/general/performance.html" rel="nofollow noreferrer">https://www.chartjs.org/docs/latest/general/performance.html</a></p>
  <p>and I might think the animation was too consumable for large amount of data, so by setting the option animation: false, this was performing better.</p>
  <pre class="lang-js prettyprint-override"><code>function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {
  
      window.chartColors = {
          red: '#dc3545',
          green: '#1cc88a',
          blue: '#4e73df',
          yellow: '#f6c23e',
          black: '#5a5c69'
      };
  
      var config = {
          type: 'pie',
          data: {
              datasets: [{
                  data: [
                      nA,
                      err,
                      notRun,
                      fail,
                      pass
                  ],
                  backgroundColor: [
                      window.chartColors.black,
                      window.chartColors.yellow,
                      window.chartColors.blue,
                      window.chartColors.red,
                      window.chartColors.green,
                  ],
                  label: 'Dataset 1'
              }],
              labels: [
                  percentageNA + &quot;% NA&quot;,
                  percentageError + &quot;% Error&quot;,
                  percentageNotRun + &quot;% Not Run&quot;,
                  percentageFailed + &quot;% Failed&quot;,
                  percentagePassed + &quot;% Passed&quot;
              ]
          },
          options: {
              parsing: false,
              normalized: true,
              animation: false
          }
  
      };
      window.onload = function() {
          var ctx = document.getElementById('chart-area').getContext('2d');
          window.myPie = new Chart(ctx, config);
      };
  }
  </code></pre>