amcharts vs highcharts vs canvasjs vs chartjs (v13)

Revision 13 of this benchmark created on

Preparation HTML

<!-- HighCharts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></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>

<!-- 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>

<!-- Chart.js -->
<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>
<style>
#canvasjs-chart canvas {
left:0px;
}
</style>

Setup

window.getHighChartsData = function() {
    return [{
      name: 'Cherno More',
      data: [
        [Date.parse("2012-09-19T20:38:56.319Z"), 1.92],
        [Date.parse("2012-09-19T20:54:07.919Z"), 1.72],
        [Date.parse("2012-09-19T20:57:10.239Z"), 1.68],
        [Date.parse("2012-09-19T21:03:14.879Z"), 1.74],
        [Date.parse("2012-09-19T21:06:17.199Z"), 1.74],
        [Date.parse("2012-09-19T21:24:31.119Z"), 1.82],
        [Date.parse("2012-09-19T21:45:47.359Z"), 1.88],
        [Date.parse("2012-09-19T21:48:49.679Z"), 1.86],
        [Date.parse("2012-09-19T22:00:58.959Z"), 1.92],
        [Date.parse("2012-09-19T22:19:12.879Z"), 1.9],
        [Date.parse("2012-09-19T22:22:15.199Z"), 1.9],
        [Date.parse("2012-09-19T22:37:26.799Z"), 1.84],
        [Date.parse("2012-09-19T22:43:31.439Z"), 1.86],
        [Date.parse("2012-09-19T22:46:33.759Z"), 1.84],
        [Date.parse("2012-09-19T22:49:36.079Z"), 1.82],
        [Date.parse("2012-09-19T23:07:49.999Z"), 1.82],
        [Date.parse("2012-09-19T23:10:52.319Z"), 1.8]
      ]
    }, {
      name: 'Botev Plovdiv',
      data: [
        [Date.parse("2012-09-19T20:38:56.319Z"), 2.9],
        [Date.parse("2012-09-19T20:54:07.919Z"), 2.68],
        [Date.parse("2012-09-19T20:57:10.239Z"), 2.66],
        [Date.parse("2012-09-19T21:03:14.879Z"), 2.74],
        [Date.parse("2012-09-19T21:06:17.199Z"), 2.74],
        [Date.parse("2012-09-19T21:24:31.119Z"), 2.82],
        [Date.parse("2012-09-19T21:45:47.359Z"), 2.88],
        [Date.parse("2012-09-19T21:48:49.679Z"), 2.86],
        [Date.parse("2012-09-19T22:00:58.959Z"), 2.88],
        [Date.parse("2012-09-19T22:19:12.879Z"), 2.9],
        [Date.parse("2012-09-19T22:22:15.199Z"), 2.82],
        [Date.parse("2012-09-19T22:37:26.799Z"), 2.84],
        [Date.parse("2012-09-19T22:43:31.439Z"), 2.86],
        [Date.parse("2012-09-19T22:46:33.759Z"), 2.84],
        [Date.parse("2012-09-19T22:49:36.079Z"), 2.82],
        [Date.parse("2012-09-19T23:07:49.999Z"), 2.8],
        [Date.parse("2012-09-19T23:10:52.319Z"), 2.8]
      ]
    }, {
      name: 'The Draw',
      data: [
        [Date.parse("2012-09-19T20:38:56.319Z"), 3.55],
        [Date.parse("2012-09-19T20:54:07.919Z"), 3.6],
        [Date.parse("2012-09-19T20:57:10.239Z"), 3.65],
        [Date.parse("2012-09-19T21:03:14.879Z"), 3.7],
        [Date.parse("2012-09-19T21:06:17.199Z"), 3.8],
        [Date.parse("2012-09-19T21:24:31.119Z"), 3.85],
        [Date.parse("2012-09-19T21:45:47.359Z"), 3.45],
        [Date.parse("2012-09-19T21:48:49.679Z"), 3.5],
        [Date.parse("2012-09-19T22:00:58.959Z"), 3.55],
        [Date.parse("2012-09-19T22:19:12.879Z"), 3.7],
        [Date.parse("2012-09-19T22:22:15.199Z"), 3.5],
        [Date.parse("2012-09-19T22:37:26.799Z"), 3.75],
        [Date.parse("2012-09-19T22:43:31.439Z"), 3.8],
        [Date.parse("2012-09-19T22:46:33.759Z"), 3.55],
        [Date.parse("2012-09-19T22:49:36.079Z"), 3.65],
        [Date.parse("2012-09-19T23:07:49.999Z"), 3.7],
        [Date.parse("2012-09-19T23:10:52.319Z"), 3.75]
      ]
    }];
  };
  
  window.getAmData = function() {
    return [{
      'date': '20:38',
      'Cherno More': 1.92,
      'Botev Plovdiv': 2.9,
      'The Draw': 3.55
    }, {
      'date': "20:54",
      'Cherno More': 1.68,
      'Botev Plovdiv': 2.68,
      'The Draw': 3.6
    }, {
      'date': "20:57",
      'Cherno More': 1.74,
      'Botev Plovdiv': 2.66,
      'The Draw': 3.65
    }, {
      'date': "21:03",
      'Cherno More': 1.74,
      'Botev Plovdiv': 2.74,
      'The Draw': 3.7
    }, {
      'date': "21:06",
      'Cherno More': 1.82,
      'Botev Plovdiv': 2.74,
      'The Draw': 3.8
    }, {
      'date': "21:24",
      'Cherno More': 1.88,
      'Botev Plovdiv': 2.82,
      'The Draw': 3.85
    }, {
      'date': "21:45",
      'Cherno More': 1.86,
      'Botev Plovdiv': 2.88,
      'The Draw': 3.45
    }, {
      'date': "21:48",
      'Cherno More': 1.92,
      'Botev Plovdiv': 2.86,
      'The Draw': 3.5
    }, {
      'date': "22:00",
      'Cherno More': 1.9,
      'Botev Plovdiv': 2.88,
      'The Draw': 3.55
    }, {
      'date': "22:19",
      'Cherno More': 1.9,
      'Botev Plovdiv': 2.9,
      'The Draw': 3.7
    }, {
      'date': "22:22",
      'Cherno More': 1.84,
      'Botev Plovdiv': 2.82,
      'The Draw': 3.5
    }, {
      'date': "22:37",
      'Cherno More': 1.86,
      'Botev Plovdiv': 2.84,
      'The Draw': 3.75
    }, {
      'date': "22:43",
      'Cherno More': 1.84,
      'Botev Plovdiv': 2.86,
      'The Draw': 3.8
    }, {
      'date': "22:46",
      'Cherno More': 1.82,
      'Botev Plovdiv': 2.84,
      'The Draw': 3.55
    }, {
      'date': "22:49",
      'Cherno More': 1.92,
      'Botev Plovdiv': 2.82,
      'The Draw': 3.65
    }, {
      'date': "23:07",
      'Cherno More': 1.82,
      'Botev Plovdiv': 2.8,
      'The Draw': 3.7
    }, {
      'date': "23:10",
      'Cherno More': 1.8,
      'Botev Plovdiv': 2.8,
      'The Draw': 3.75
    }];
  };
  
  window.getCanvasjsData = function() {
    return [[{
      x: new Date(2012, 09, 19, 20, 38),
      y: 1.92
    }, {
      x: new Date(2012, 09, 19, 20, 54),
      y: 1.72
    }, {
      x: new Date(2012, 09, 19, 20, 57),
      y: 1.68
    }, {
      x: new Date(2012, 09, 19, 21, 03),
      y: 1.74
    }, {
      x: new Date(2012, 09, 19, 21, 06),
      y: 1.74
    }, {
      x: new Date(2012, 09, 19, 21, 24),
      y: 1.82
    }, {
      x: new Date(2012, 09, 19, 21, 45),
      y: 1.88
    }, {
      x: new Date(2012, 09, 19, 21, 48),
      y: 1.86
    }, {
      x: new Date(2012, 09, 19, 22, 00),
      y: 1.92
    }, {
      x: new Date(2012, 09, 19, 22, 19),
      y: 1.9
    }, {
      x: new Date(2012, 09, 19, 22, 22),
      y: 1.9
    }, {
      x: new Date(2012, 09, 19, 22, 37),
      y: 1.84
    }, {
      x: new Date(2012, 09, 19, 22, 43),
      y: 1.86
    }, {
      x: new Date(2012, 09, 19, 22, 46),
      y: 1.84
    }, {
      x: new Date(2012, 09, 19, 22, 49),
      y: 1.82
    }, {
      x: new Date(2012, 09, 19, 23, 07),
      y: 1.82
    }, {
      x: new Date(2012, 09, 19, 23, 10),
      y: 1.8
    }], [{
      x: new Date(2012, 09, 19, 20, 38),
      y: 2.9
    }, {
      x: new Date(2012, 09, 19, 20, 54),
      y: 2.68
    }, {
      x: new Date(2012, 09, 19, 20, 57),
      y: 2.66
    }, {
      x: new Date(2012, 09, 19, 21, 03),
      y: 2.74
    }, {
      x: new Date(2012, 09, 19, 21, 06),
      y: 2.74
    }, {
      x: new Date(2012, 09, 19, 21, 24),
      y: 2.82
    }, {
      x: new Date(2012, 09, 19, 21, 45),
      y: 2.88
    }, {
      x: new Date(2012, 09, 19, 21, 48),
      y: 2.86
    }, {
      x: new Date(2012, 09, 19, 22, 00),
      y: 2.88
    }, {
      x: new Date(2012, 09, 19, 22, 19),
      y: 2.9
    }, {
      x: new Date(2012, 09, 19, 22, 22),
      y: 2.82
    }, {
      x: new Date(2012, 09, 19, 22, 37),
      y: 2.84
    }, {
      x: new Date(2012, 09, 19, 22, 43),
      y: 2.86
    }, {
      x: new Date(2012, 09, 19, 22, 46),
      y: 2.84
    }, {
      x: new Date(2012, 09, 19, 22, 49),
      y: 2.82
    }, {
      x: new Date(2012, 09, 19, 23, 07),
      y: 2.8
    }, {
      x: new Date(2012, 09, 19, 23, 10),
      y: 2.8
    }], [{
      x: new Date(2012, 09, 19, 20, 38),
      y: 3.55
    }, {
      x: new Date(2012, 09, 19, 20, 54),
      y: 3.6
    }, {
      x: new Date(2012, 09, 19, 20, 57),
      y: 3.65
    }, {
      x: new Date(2012, 09, 19, 21, 03),
      y: 3.7
    }, {
      x: new Date(2012, 09, 19, 21, 06),
      y: 3.8
    }, {
      x: new Date(2012, 09, 19, 21, 24),
      y: 3.85
    }, {
      x: new Date(2012, 09, 19, 21, 45),
      y: 3.45
    }, {
      x: new Date(2012, 09, 19, 21, 48),
      y: 3.5
    }, {
      x: new Date(2012, 09, 19, 22, 00),
      y: 3.55
    }, {
      x: new Date(2012, 09, 19, 22, 19),
      y: 3.7
    }, {
      x: new Date(2012, 09, 19, 22, 22),
      y: 3.5
    }, {
      x: new Date(2012, 09, 19, 22, 37),
      y: 3.75
    }, {
      x: new Date(2012, 09, 19, 22, 43),
      y: 3.8
    }, {
      x: new Date(2012, 09, 19, 22, 46),
      y: 3.55
    }, {
      x: new Date(2012, 09, 19, 22, 49),
      y: 3.65
    }, {
      x: new Date(2012, 09, 19, 23, 07),
      y: 3.7
    }, {
      x: new Date(2012, 09, 19, 23, 10),
      y: 3.75
    }]];
  };
  
  window.getChartJsData = function() {
    return {
      labels: ["Cherno More", "Botev Plovdiv", "The Draw"],
      datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        data: [1.92, 1.72, 1.68, 1.74, 1.74, 1.82, 1.88, 1.86, 1.92, 1.9, 1.9, 1.84, 1.86, 1.84, 1.82, 1.82, 1.8]
      }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        data: [2.9, 2.68, 2.66, 2.74, 2.74, 2.82, 2.88, 2.86, 2.88, 2.9, 2.82, 2.84, 2.86, 2.84, 2.82, 2.8, 2.8]
      }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(0,187,205,1)",
        pointColor: "rgba(0,187,205,1)",
        pointStrokeColor: "#fff",
        data: [3.55, 3.6, 3.65, 3.7, 3.8, 3.85, 3.45, 3.5, 3.55, 3.7, 3.5, 3.75, 3.8, 3.55, 3.65, 3.7, 3.75]
      }]
    };
  };

Test runner

Ready to run.

Testing in
TestOps/sec
Chart JS
var chartJScanvas = new Chart(document.getElementById("chartjs-canvas").getContext("2d")).Line(window.getChartJsData(), {
  animation: false,
  onAnimationComplete: function() {}
});
ready
Canvasjs
var data = window.getCanvasjsData();

var chartCanvas = new CanvasJS.Chart("canvasjs-chart", {

  title: {
    text: "Average Price",
    fontSize: 30
  },
  axisX: {
    gridColor: "Silver",
    tickColor: "silver",
    valueFormatString: "HH:mm"

  },
  toolTip: {
    shared: true
  },
  theme: "theme2",
  axisY: {
    gridColor: "Silver",
    tickColor: "silver"
  },
  legend: {
    verticalAlign: "center",
    horizontalAlign: "right"
  },
  data: [{
      type: "line",
      showInLegend: true,
      lineThickness: 2,
      name: "Cherno More",
      markerType: "square",
      color: "#F08080",
      dataPoints: data[0]
    }, {
      type: "line",
      showInLegend: true,
      name: "Botev Plovdiv",
      color: "#20B2AA",
      lineThickness: 2,

      dataPoints: data[1]
    }, {
      type: "line",
      showInLegend: true,
      name: "The Draw",
      color: "#423543",
      lineThickness: 2,

      dataPoints: data[2]
    }


  ]
});

chartCanvas.render();
ready
amCharts
if (window.amChart) window.amChart.clear();

// SERIAL CHART
window.amChart = new AmCharts.AmSerialChart();
window.amChart.startDuration = 0;
window.amChart.dataProvider = window.getAmData();
window.amChart.categoryField = "date";
window.amChart.startDuration = 0.5;
window.amChart.balloon.color = "#000000";
window.amChart.addListener("init", function() {});

// 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";
graph.balloonText = "place taken by Cherno More in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
graph.balloonText = "place taken by Botev Plovdiv in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
graph.balloonText = "place taken by The Draw in [[category]]: [[value]]";
graph.bullet = "round";
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
Highcharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  chart: {
    renderTo: 'highcharts-container',
    type: 'spline',
    animation: false
  },
  title: {
    text: 'Average prices'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  yAxis: {
    title: {
      text: 'average price'
    },
    min: 0
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
    }
  },
  series: window.getHighChartsData()
}, function() {});
ready

Revisions

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