CODEWITHSUNDEEP
angularchart.js
Dimanoid
Dimanoid

Reputation: 7289

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

I'm trying to plot 8 series of line charts with chart.js but initial drawing, turning on/off seria by clicking on legend and/or adding some points to series all are extremely slow. Takes up to 10 seconds sometimes. Am I missing some magic "speedup property" in options or this is normal?

Actually I need to draw and update in real time about 10 series of 2000 points each, is this possible with some reasonable update time?

This is the example I'm playing with: https://stackblitz.com/edit/angular-chartjs-ex

Upvotes: 1

Views: 10381

Answers (1)

timclutton
timclutton

Reputation: 13024

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>

Upvotes: 2

Related Questions