Chartjs-Chart.js extremely slow on 8 series of 500+ points

by

1👍

Applying chart options as described in High Performance Line Charts to your vanilla JS example renders a chart with no appreciable performance problems for me in Firefox 67.

let labels = [];
let data1 = [];
let data2 = [];
for (let i = 0; i < 2000; i++) {
  labels.push("l" + i);
  data1.push(Math.floor(Math.random() * 100));
  data2.push(Math.floor(Math.random() * 100));
}
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: data1
    }, {

      label: 'My First dataset',
      //backgroundColor: 'rgb(255, 255, 132)',
      borderColor: 'rgb(255, 255, 132)',
      data: data2

    }]
  },

  // Configuration options go here
  options: {
    animation: {
      duration: 0 // general animation time
    },
    hover: {
      animationDuration: 0 // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
    elements: {
      line: {
        tension: 0 // disables bezier curves
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>

Leave a comment