I’ve used quite a few different JavaScript charting libraries over the past few years. My high level take is that most of the libraries do about 95% of what you want and there is no holy grail. That said, I haven’t taken the time to learn D3 in depth (yet). I suspect I could accomplish 100% of what I need in D3, albeit with more work.

This article will give you some background on how I’ve used the different libraries, what I like, what I don’t, and why I think learning D3 could be valuable.

Plotly.js

Python was my first real programming language and Plotly for Python was the first charting library I really learned. Plotly felt a little complicated at first, but I took one of the Jose Portilla Udemy courses on it that helped immensely. I recommend that course if you’re new to charting in Python and feeling lost.

There is now a lighter version of Plotly called Plotly Express that makes the library even more accessible. Plotly Express is my first choice when I’m working in a Jupyter Notebook and want some quick visuals.

Over time I started to do more front end work with vanilla JavaScript and Vue and needed a JavaScript charting library. The first library I picked up was Plotly.js because I was already familiar with Plotly for Python. The transition to JavaScript requires a little rethinking because you don’t have Pandas, but, overall, the transition to JavaScript felt fairly natural.

The main downside to Plotly is that it uses React for interactivity and it feels heavy to load on sites. I used Plotly.js on my RealPlanCalc project and I attribute much of the slow initial load to Plotly.

The nice thing about plotly is that it has every chart type that I’ve wanted to use. It’s built on top of D3 and provides a lot of flexibility in customizing charts. I’ve had situations where I run into things that are difficult to format, but you can generally find an answer even if it takes a while.

Chart.js

Of all the charting libraries in this post, Chart.js is one of two (amCharts is the other) that uses HTML Canvas to render charts (the others are SVG and D3 based). I’ve used Chart.js in a couple of Django projects recently and have mixed feelings about it.

The main thing I like about Chart.js is the package size and load time. It’s light, fast, and looks relatively good with default settings.

The main thing I dislike about Chart.js is that it seems more difficult to format charts and not all chart types are available.

Coming from a heavier Python background, Chart.js feels more JavaScript like and seems less intuitive/more frustrating. Additionally, things like Pan and Zoom aren’t native to the library and the plugins take some work to configure correctly.

Highcharts

Highcharts is another library that uses SVG and uses D3 under the hood. I plugged Highcharts into one of my local Django projects to try it out and thought it was okay. The documentation is thorough, but I still ran into some issues getting things to work as desired.

Overall, Highcharts worked fine, but as a solo-dev I didn’t “wowed” enough to pay the price for a production project.

amCharts

I was pleasantly surprised when I tried amCharts. I found it easy to use, the documentation was good, and I think it rivals Plotly in intuitiveness. It does have a price tag for commercial use without a logo, but it’s a library that I’d definitely consider paying to use depending on my use case.

Note that you can also use a free version of amChart to try it out. It simply contains a small logo on the charts. Buying the premium version removes the logo.

c3.js

Last on the list is c3.js. I haven’t used c3 in any projects (yet), but it’s next on my list to try. It looks like a relatively simple, D3 based charting library with most of the typical charts. One nice thing about c3 is that it seem like it should be easier to bring in D3 for greater flexibility and customization. Even though I haven’t used c3 yet, it looks promising.

And of course there’s d3

I’ve taken a look at d3 a few times and recognize that’s quite a bit different than higher level charting libraries. d3 is more of a low level utility language for manipulative svg, but it does provide a ton of flexibility. I think there could be value in learning d3, but it’s really use case driven.

The two main reasons I see to learn d3 are greater customization (for more artistic visuals) or missing chart types. I originally looked at learning d3 to build a custom Gantt chart because I couldn’t find an open source solution that I liked. Upon further research, I realized that amCharts has a Gantt chart.

I’ve considered learning d3 for greater flexibility to create more artistic visualizations, but I haven’t been able to make much progress. At the end of the day, I’m usually trying to solve a problem that can be solved with an existing chart type.

Summary

It seems like most of the JavaScript charting libraries (especially the free ones) do 90-95% of what you need, but you’ll run into some chart type that’s missing. I like Plotly for Python, but Plotly.js feels a little heavy on load. c3.js looks like a promising option for a free library and I’m a big fan of amCharts for a paid solution.

Get notified when new posts are published

powered by TinyLetter