Chart Performance with Large number of Data Points

Download JavaScript Chart Samples

CanvasJS JavaScript Charts are built for High Performance which allows you to render/ update large number of data in just a few milliseconds without any performance lag. CanvasJS is built using HTML5 Canvas & has over 10X better performance over traditional SVG charts. Given example shows full-featured Chart along with HTML/JavaScript source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var limit = 50000;
var y = 100;    
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
	y += Math.round(Math.random() * 10 - 5);
	dataPoints.push({
		x: i,
		y: y
	});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);

//Better to construct options first and then pass it as a parameter
var options = {
	zoomEnabled: true,
	animationEnabled: true,
	title: {
		text: "Try Zooming - Panning"
	},
	axisY: {
		lineThickness: 1
	},
	data: data  // random data
};

var chart = new CanvasJS.Chart("chartContainer", options);
var startTime = new Date();
chart.render();
var endTime = new Date();
document.getElementById("timeToRender").innerHTML = "Time to Render: " + (endTime - startTime) + "ms";

}

Related Customization

You can further enhance the performance of your graph while working with huge sets of data by setting the markerSize to zero in line / area charts. Some other related customizations include toolbar, markerType, lineThickness, zoomEnabled, etc.