amcharts vs canvasjs vs highcharts vs chartjs (v19)

Revision 19 of this benchmark created by YUVA Lad on

Preparation HTML

<!-- canvasjs -->
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="canvasjs-chart" style="width: 900px; height: 500px;"></div>

<!-- HighCharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/boost.js"></script>

<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<!-- chartjs -->
<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="chartjs-container" style="min-width: 900px; height: 500px; margin: 0 auto"><canvas id="chartjs-canvas" height="500px" width="900px"></canvas></div>

<!-- AM Charts -->
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="amcharts-container" style="width: 900px; height: 500px;"></div>

Setup

// random value generator (pick between -10 and 10)
      window.generateRandomY = function() {
        return Math.floor(Math.random() * 21) - 10;
      }
  
      window.getHighChartsData = function() {
        var datasets = {
          'one': [],
          'two': [],
          'three': []
        };
        for (var i = 0; i < 1000; i++) {
          datasets['one'].push(window.generateRandomY());
          datasets['two'].push(window.generateRandomY());
          datasets['three'].push(window.generateRandomY());
        }
        return [{
          name: 'Cherno More',
          data: datasets['one']
        }, {
          name: 'Botev Plovdiv',
          data: datasets['two']
        }, {
          name: 'The Draw',
          data: datasets['three']
        }];
      };
  
  
      window.getCanvasjsData = function() {
        var datasets = {
          'one': [],
          'two': [],
          'three': []
        };
        for (var i = 0; i < 1000; i++) {
          datasets['one'].push({
            x: i,
            y: window.generateRandomY()
          });
          datasets['two'].push({
            x: i,
            y: window.generateRandomY()
          });
          datasets['three'].push({
            x: i,
            y: window.generateRandomY()
          });
        }
  
        return [datasets['one'], datasets['one'], datasets['one']];
      };
  
      window.getChartJsData = function() {
        var labelset = [];
        var datasets = {
          'one': [],
          'two': [],
          'three': []
        };
        for (var i = 0; i < 1000; i++) {
          labelset.push("");
          datasets['one'].push(window.generateRandomY());
          datasets['two'].push(window.generateRandomY());
          datasets['three'].push(window.generateRandomY());
        }
  
        return {
          labels: labelset,
          datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: datasets['one']
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: datasets['two']
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(0,187,205,1)",
            pointColor: "rgba(0,187,205,1)",
            pointStrokeColor: "#fff",
            data: datasets['three']
          }]
        };
      };
  
      window.getAmData = function() {
        var datasets = [];
        for (var i = 0; i < 1000; i++) {
          datasets.push({
            'date': i,
            'Cherno More': window.generateRandomY(),
            'Botev Plovdiv': window.generateRandomY(),
            'The Draw': window.generateRandomY()
          });
        }
        return datasets;
      };
  
      window.getFlotData = function() {
        var datasets = [
          [],
          [],
          []
        ];
        for (var i = 0; i < 1000; i++) {
          datasets[0].push([i, window.generateRandomY()]);
          datasets[1].push([i, window.generateRandomY()]);
          datasets[2].push([i, window.generateRandomY()]);
        }
  
        return datasets;
      };

Test runner

Ready to run.

Testing in
TestOps/sec
CanvasJS
var data = window.getCanvasjsData();

var chartCanvas = new CanvasJS.Chart("canvasjs-chart", {
  interactivityEnabled: false,
  data: [{
    type: "line",
    name: "Cherno More",
    color: "#F08080",
    dataPoints: data[0]
  }, {
    type: "line",
    name: "Botev Plovdiv",
    color: "#20B2AA",
    dataPoints: data[1]
  }, {
    type: "line",
    name: "The Draw",
    color: "#423543",
    dataPoints: data[2]
  }]
});

chartCanvas.render();
ready
HighCharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  chart: {
    renderTo: 'highcharts-container',
    type: 'line'
  },
  plotOptions: {
    line: {
      allowPointSelect: false,
      animation: false,
      boostThreshold: 500,
      dataLabels: {
        enabled: false
      },
      enableMouseTracking: false,
      events: []
    }
  },
  series: window.getHighChartsData()
});
ready
Chart.js
Chart.defaults.global.animation = false;
Chart.defaults.global.showTooltips = false;
Chart.defaults.global.tooltipEvents = [];
Chart.defaults.global.bezierCurve = false;
Chart.defaults.global.bezierCurveTension = 0;
Chart.defaults.global.pointDot = false;
Chart.defaults.global.pointDotRadius = 0;
Chart.defaults.global.datasetFill = false;
Chart.defaults.global.datasetStrokeWidth = 1;
Chart.defaults.global.events = [];
var chartJScanvas = new Chart(document.getElementById("chartjs-canvas").getContext("2d")).Line(window.getChartJsData(), {
  animation: false,
  onAnimationComplete: function() {},
  pointDot: false,
  bezierCurve: false,
  datasetFill: false,
  datasetStroke: true,
  datasetStrokeWidth: 1
});
ready
amCharts
if (window.amChart) window.amChart.clear();

// SERIAL CHART
window.amChart = new AmCharts.AmSerialChart();
window.amChart.dataProvider = window.getAmData();
window.amChart.categoryField = "date";
window.amChart.balloon.color = "#000000";

// AXES
// category
var categoryAxis = window.amChart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Average Prices";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.gridCount = 10;
window.amChart.addValueAxis(valueAxis);

// GRAPHS
// Italy graph                                                                  
var graph = new AmCharts.AmGraph();
graph.title = "Cherno More";
graph.valueField = "Cherno More";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
window.amChart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.zoomable = false;
chartCursor.cursorAlpha = 0;
window.amChart.addChartCursor(chartCursor);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
window.amChart.addLegend(legend);

// WRITE
var wrapper = document.getElementById("amcharts-container");
window.amChart.write(wrapper);
ready

Revisions

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