Google Charts vs NVD3 vs Chart.js – Part 1

Google Charts vs NVD3 vs Chart.js – Part 1

A few days ago I wrote a post on how to add Google Charts in WordPress. The method I describe can also be used to insert NVD3 or Chart.js graphics. Let’s take a look at some free-to-use Charting tools:

  • Google Charts work really well, are easy to use and well documented, but look quite old-fashioned, and are non animated (by default) and non responsive.
  • NVD3 is based on the great but complex D3 and is easier to use, interactive, responsive, animated and looks really crisp. Downsides are the documentation (ok but not extensive) and too few examples.
  • Chart.js also produces responsive, animated and great looking diagrams, but doesn’t have as many options as Google Charts.

Example 1: horizontal bar chart

My first example is a horizontal bar chart with two series, featuring the six largest banks of the Global Alliance for Banking on Values network. I’ll refrain from tweaking and customizing the Charts, to see how well each charting tool works by default. Every chart in this comparison has a 1 pixel black border to show how it uses space inside the div element.

  • Google Charts’ bar chart is rendering well, with 100% width and 500 pixels height in the div options. There is a lot of padding around the chart itself. Though it isn’t responsive, it scales really really well even on mobile devices.
  • NVD3‘s “multiBarHorizontalChart” shows some problems rendering the labels, and I couldn’t get the colors to work. The use of screen space is excellent, playing with the responsive and interactive behavior is a pleasure.
  • Chart.js had no horizontal bar chart capability at the time this article was written (now it has even multi-axis and stacked bar charts capabilities). I’ll include Chart.js in part 2 (line charts) and part 3 (pie and donut charts, soon to come) of this comparison.

Winner for horizontal bar charts: Google Charts

Although Google Charts has an old-fashioned look, it seems more reliable for easy and fast deployment in real life than NVD3. There are some Javascript tricks to make it responsive if needed. NVD3 still is a great option if you want to spend a little more time fine-tuning it and need interactivity and responsiveness out of the box.

Javascript code to be inserted to HTML head

Here is the code for Google Charts:

<script type="text/javascript" src="{'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2013', '2012'],
    ['Crédit Coopératif', 22394, 19709],
    ['Vancity', 16408, 16947],
    ['Triodos Bank', 8876, 6994],
    ['GLS Bank', 4457, 3586],
    ['Affinity', 3699, 2458],
    ['Assiniboine', 3323, 3410]
  var options = {
    title: 'The largest ethical banks from the Global Alliance for Banking on Values network',
    hAxis: {
      title: 'Total assets in USD Million',
      minValue: 0
  var chart = new google.visualization.BarChart(
  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 – fixes for rendering labels and colors are welcome!

  var largest_banks_chart_NVD3_data = [{
    key: '2013',
    color: '#3366cc',
    values: [{
      "label": "Crédit Coopératif",
      "value": 22394
    }, {
      "label": "Vancity",
      "value": 16408
    }, {
      "label": "Triodos Bank",
      "value": 8876
    }, {
      "label": "GLS Bank",
      "value": 4457
    }, {
      "label": "Affinity",
      "value": 3699
    }, {
      "label": "Assiniboine",
      "value": 3323
  }, {
    key: '2012',
    color: '#dc3912',
    values: [{
      "label": "Crédit Coopératif",
      "value": 19709
    }, {
      "label": "Vancity",
      "value": 16947
    }, {
      "label": "Triodos Bank",
      "value": 6994
    }, {
      "label": "GLS Bank",
      "value": 3586
    }, {
      "label": "Affinity",
      "value": 2458
    }, {
      "label": "Assiniboine",
      "value": 3410
  var chart;
  nv.addGraph(function() {
    chart = nv.models.multiBarHorizontalChart()
      .x(function(d) {
        return d.label
      .y(function(d) {
        return d.value
     /* .showValues(false)
      .color(["#3366cc", "#dc3912"])
      //chart.color(["#3366cc", "#dc3912"]);
      //chart.barColor(function (d, i) { var colors = d3.scale.category20().range().slice(10); return colors[i % colors.length-1]; });
      //chart.color(function (d, i) { var colors = d3.scale.category20().range().slice(10); return colors[i % colors.length-1]; });'#largest_banks_chart_NVD3').append('svg')
    return chart;

Leave a Comment

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