CanvasJS vs Highcharts Performance Comparison

Benchmark created on

Preparation HTML

<div id="chartContainer" style="width: 100%; height: 360px">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js">

Setup

function randomDataGenerator(noOfPoints) {
	var points = [];
	var y = 0;
	for(var i = 0; i < noOfPoints; i++) {
		y += (Math.random() * 10 - 5);
		points.push({ x: i, y: y});
	}	
	return points;
}

Test runner

Ready to run.

Testing in
TestOps/sec
CanvasJS Line Chart with 100000 Datapoints
var chart = new CanvasJS.Chart("chartContainer", {
	data: [{
		type: "line",
		dataPoints: randomDataGenerator(100000)
	}]
});
chart.render();
ready
Highcharts Line Chart with 100000 Datapoints
Highcharts.chart('chartContainer', {
   	series: [{
   		type: "line",
       	data: randomDataGenerator(100000)
    }]
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.