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. As I’m starting a new website on ethical banking, I’m trying to find the best charting library for my basic needs. 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 has no horizontal bar chart capability. 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.

→ I’ll use Google Charts for basic horizontal bar charts, as in my new list of the largest ethical banks.

Javascript code to be inserted to HTML head

Here is the code for Google Charts:

Here is the header code for NVD3:

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!

Don’t miss part 2 – line charts.