I’m a little bit obsessed with JavaScript visualizations if you hadn’t already realized that yet. This article is dedicated to finding the very best JavaScript bar chart in terms of visual and usability matters. Each bar chart used will have the pro’s and cons weighed up and eventually, will be given my personal opinion for the best contender.

The data used throughout this article is an analysis of programming language job postings in the year of 2017 on the job-website Indeed. Each example will be shown via a CodePen so that one, you can see the chart in action and two, you can use the code for yourself if required.

NVD3 Bar Chart

I love NVD3 charts and I’ve used them quite a lot over the last few years in many use cases. Let’s see it in action –

Example

See the Pen NVD3.JS Bar Chart by Danny Englishby (@DanEnglishby) on CodePen.0

Here are the pro’s and con’s of this JavaScript bar chart –

Pros

Each bar renders in an easy-on-the-eye colour palette.

Hovering tooltip displays both label and values.

Completely responsive with an absolutely incredible re-sizing animation.

A real-time update is capable.

Cons

Maybe a bit to much code required to render a chart.

Ability to add extras to the visualization isn’t easy, for example, an average line.

Lastly, this is purely constructive criticism for a brilliant library, the documentation isn’t brilliant and it lacks a knowledge base.

How to use it?

You can get the source files from the GitHub repository or use their dedicated CDN as I have in the CodePen. It’s even got a live code area on the libraries own website that you can mess around with code and charts too.

ChartJS Bar Chart

Another contender that deserves a spot in this visualization comparison is that of the ChartJS library. This library provides a elegant design modernization with any dashboard with little effort. Here’s a default ChartJS bar chart example –

Example

See the Pen ChartJS Bar Chart by Danny Englishby (@DanEnglishby) on CodePen.0

Pros

Easy-to-understand functions and options throughout.

Feels easy to work with.

Highly configurable in terms of design and additional data visualizations like a line across.

Really-cool transition effect when updating with real-time data.

Well-laid out documentation making it swift to add some advanced configurations.

Cons

Although responsive, it doesn’t have the greatest effect on re-sizing.

Have to define borders separately to bar fill colors which, really is annoying.

The default behavior of rendering to the full width and height of its parent, although, this can easily be switched off with an option.

How to use it?

ChartJS can be installed and used in a variety of ways, I wrote a thorough guide on using the ChartJS library which shows exactly how to get started.

Google Charts Bar Chart

As with most things Google, you can expect to see a shed-load of documentation, and the dedicated bar-chart page is no exception, it’s almost endless documentation gives you plenty to play with. A quick tip here also is that, for what I would consider a ‘bar chart’ is named a column chart within the Google charts library.

Example

See the Pen Google Charts Bar Chart by Danny Englishby (@DanEnglishby) on CodePen.0

Pros

A huge array of customization options at the ready.

Extensive documentation.

Probably the most feature-rich bar-chart that is free to use.

Direct links to chart JsFiddle to help get started quickly.

Plenty of examples to learn from and take inspiration from.

Cons

The rendered finish looks quite dated for the modern day, although this can be changed with the right options.

No obvious instructions or built-in options to make the chart responsive.

No ability to use the charts offline, there must always be a connection for the Google content delivery network.

How to use it?

Within an article I written a while back, I detail instructions to get started with this mighty JavaScript library, check it out here or, simply take the code from the working CodePen example above.

ToastUI Bar Chart

ToastUI is a relatively new library in the great scheme of things, but that alone helps bring big benefits to the library. It’s modernized approach delivers fantastic visuals that should not be missed! Let’s see an example of their take on a bar chart or should I say column chart.

Example

See the Pen ToastUI Bar Chart by Danny Englishby (@DanEnglishby) on CodePen.0

Pros

These charts have a built in export feature that allows you to export the chart data directly to an excel or csv file.

Additionally, to exporting data, the bar chart comes ready to export as an image in .jpeg or .png format instantly.

Wide browser compatibility that even works in Internet Explorer 8 onward.

Detailed API and example documentation.

A highly modernized rendered visual.

Capable of adding extra visuals including lines.

Cons

No obvious in-built responsive feature, I’m sure it’s possible with some extra custom code though.

Requires a dependency, namely raphael.js.

How to use it?

ToastUI Chart provides many ways to get started including CDN, NPM, and bower. It’s getting started documentation can be found here. If you want to dive deeper with this library, you can check out the website

The Winner

I have to say I am torn between two, namely Google Charts & ToastUI, the reason being is that If I say ToastUI I’m being biased for visual design, but Google Charts offer far-superior customization.

ToastUI really offers a great experience with modern design, though for true browser compatibility and extended default features like exporting as an image or excel files.

Google Charts Offers a huge array of additional customization like labeling, annotating and it’s documentation base is un-contended by far.

My personal opinion for the best would now have to be ToastUI, I can’t see it being too much longer until it has the missing features that Google currently holds. It’s a pretty new library and I would have thought It is still being intensely developed.

Summary

Don’t get me wrong, there are plenty of chart libraries out there, but I’ve personally picked out a shortlist to compare against each other. When all of the chart’s features are combined, they have the capability for any use case for data visualization. And, ultimately this might help sway your own preference. I hope this article sheds some light on the best and free bar charts to use in your own projects and saves you some time scouring the web!

The Author: Dan Englishby

Post navigation