Highcharts is very much an ‘off-the-shelf’ charting library where you choose your chart, plug in your data and you’re good to go. D3 on the other hand provides building blocks which can be combined in countless combinations to produces exactly the type of chart you require.
This article looks at reasons for choosing one over the other.
5 Reasons to use Highcharts
Ready to go
We basically choose the type of chart we’d like and plug in our data. For example, to create a pie chart our code would look like:
(See code on Codepen.) This gives us:
There’s even a nice animation when the chart loads.
Lots of chart types
Highcharts provides a large number of ready to use charts including common ones such as:
and less common ones:
- tile map
- parallel coordinates
The Highcharts website has a full list. As an example let’s create a sunburst chart:
See code on Codepen.
Highcharts has a boost module which allows a lot more data to be rendered. It comes at the cost of some features (such as animation) but the trade off will be well worth it in situations where a great deal of data (e.g. 1 million data points) needs to be rendered.
Here’s an example where 100 line series are rendered, each containing 10,000 data points:
It’s easy to take for granted features such as tooltips, labels, legends and responsivity. If coding a chart from scratch (e.g. using D3) each of these features demand additional time and effort to implement. They come included with Highcharts and also have a good degree of customisation.
For example we can add annotations to a line chart using the
It’s as simple as including the aforementioned module:
See code example.
A menu appears in the top right corner with options to download the chart as a PNG, JPG, PDF or SVG.
Click on one of the formats and an image of our chart is downloaded:
5 Reasons to choose D3
D3 is more like a set of building blocks to help us build a chart or data visualisation from the ground up, rather than a library of pre-built charts. This means that there’s very little limit (besides what’s possible in a web browser) to what can be built with D3.
This is why some of the most impressive data visualisations on the web over the past years (such as in the New York Times) have been built using D3. For customised, bespoke and interactive data visualisations that stand out from the crowd, D3 is hard to beat.
D3 is completely free to use, unlike Highcharts which is non-free for commercial use.
Creating a chart or data visualisation with D3 will give us complete control over appearance and interaction. Any aspect of the chart, be it the data series, axes, legends, tooltips or animations will be precisely controllable and there are very few worries about hitting any constraints. This is why it can be a lower risk proposition than using an off the shelf type charting library.
As already mentioned, D3 can be thought of as a set of building blocks for helping build a chart or data visualisation from the ground up. Most often D3 will be used for most aspects of the visualisation, including positioning of data marks (bars, lines etc.), axes, transitions and DOM manipulation.
However we can also use D3 as a toolkit where we just use a handful of its powerful functions. For example, supposing we wanted to add a world globe to a React app. We can use D3’s geographic capabilities to parse a TopoJSON file, project it and convert into SVG path strings, but leave the final rendering to React:
See code on Codepen
One of D3’s key strengths is the vast number of code examples that show off the capabilities of D3. The D3 website has a large gallery of examples and D3 creator Mike Bostock also runs a site called bl.ocks.org which hosts thousands of examples. It can get overwhelming, but it’s a great way to see what’s possible with D3 and to be able to delve into the underlying code.
Hopefully this article has given you some insight into whether to choose Highcharts or D3 (or indeed, any other charting library). The key takeaway is that both libraries are very powerful and robust and will serve you well, provided you use them for their intended purpose. Highcharts is great for standard chart types, especially when you want to get something up and running with minimal effort. If you’re after something more bespoke where you can fine tune every little detail, then D3 is probably the way to go.