Google Charts vs NVD3 vs Chart.js – Part 2

Google Charts vs NVD3 vs Chart.js – Part 2

Here is the second part of my search of the best free-to-use charting library. Part 1 was a comparison of horizontal bar charts rendered with Google Charts and NVD3 (Chart.js doesn’t support horizontal bar charts).

Example 2: line chart

The second example is a line chart featuring the growth of the Netherlands-based ethical bank Triodos Bank, which has branches in Belgium, Germany, United Kingdom and Spain. We’ll start with Google Charts:

  • Google charts‘ line chart is rendering well. In fact, I’m using an AreaChart to have a filling below the line. As in part 1, there is a lot of padding inside the div. with 100% width and 500 pixels height in the div options.
  • NVD3‘s line chart’s rendering is excellent. It makes perfect use of screen space inside the div. I couldn’t get the line to show value points, though. Javascript code for NDV3 work if placed in HTML head or footer.

  • Chart.js was the trickiest to implement. It doesn’t render in a div element but uses a HTML canvas instead. Canvas are not so easy to resize and to make responsive as divs. Chart.js also won’t render at all if the Javascript is in the HTML head. So I had to use another (excellent) WordPress plugin (CSS and JavaScript Toolbox) to insert the Javascript in the HTML footer.

Winner for line charts: tie

I couldn’t find a real winner for line charts. Both Google Charts and NVD3 work really great on desktops, although with very different results. Chart.js has the most beautiful result on mobile devices (partly because the canvas scales both width and height), but I prefer Google Charts or NVD3 on desktop.

→ I’ll use Google Charts and Charts.js for line charts on my Website about ethical banking (in German).

Javascript code to be inserted to HTML head

Here is the code for the Google Chart:

<script type="text/javascript" src="{'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Total assets'],
      ['2009', 4279],
      ['2010', 4631],
      ['2011', 5556],
      ['2012', 6994],
      ['2013', 8876]

    var options = {
      title: 'Triodos Bank – Total assets',
      // curveType: 'function',
      legend: 'none',
      colors: ['#06C'],
      pointSize: 7,
      vAxis: {
        minValue: 0

    var chart = new google.visualization.AreaChart(document.getElementById('triodos_bank_growth_google_chart'));

    chart.draw(data, options);

Here is the header code for NVD3:

<link href="" rel="stylesheet" type="text/css">
<script src="" charset="utf-8"></script>
<script src=""></script>
  svg {
    display: block;
  svg {
    margin: 0px;
    padding: 0px;
    height: 500px;
    width: 100%;

Javascript code to be inserted to the HTML footer

Here is the footer (or body) code for NVD3:

  var long_short_data = [{
    "key": "Total assets",
    "bar": true,
    "color": "#06C",
    "area": true,
    "values": [
      [2009, 4279],
      [2010, 4631],
      [2011, 5556],
      [2012, 6994],
      [2013, 8876]

var chart;
nv.addGraph(function() {
  chart = nv.models.lineChart()
    .x(function(d, i) {
      return d[0]
    .y(function(d, i) {
      return d[1]
  return chart;

Here is the code for Chart.js, to be inserted to HTML body or footer:

  var ctx = document.getElementById("myChartjs").getContext("2d");

  var datajs = {
    labels: ["2009", "2010", "2011", "2012", "2013"],
    datasets: [{
      label: "Total assets",
      fillColor: "rgba(0, 102, 204, 0.2)",
      strokeColor: "rgba(0, 102, 204, 1)",
      pointColor: "rgba(0, 102, 204, 1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(0, 102, 204, 1)",
      data: [4279, 4631, 5556, 6994, 8876]
    }, ]

  var myChartjsOptions = {
    scaleStartValue: 0,
    scaleBeginAtZero: true,
    responsive: true,
    bezierCurve: false

  var myLineChart = new Chart(ctx).Line(datajs, myChartjsOptions);

Here is the code for Chart.js, to be inserted in head:

<script src=""></script>

Finally, this canvas element has to be inserte to HTML body:

<canvas id="myChartjs" width="771" height="400" style="border:1px solid black"></canvas>


#Google #Charts #NVD3 #Chart.js #Part

Leave a Comment

Your email address will not be published. Required fields are marked *