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.

Javascript code to be inserted to HTML head

Here is the code for the Google Chart:

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:

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

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

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