D3.js and Chart.js are among the best-known and most widely used JavaScript data-visualisation libraries. One gives its users more freedom to customise, while the other is considered “simpler”.
What are these charting libraries for?
D3.js and Chart.js are two JavaScript libraries that let you produce graphical, interactive data visualisations. These JavaScript libraries bind your data to an object and display it in a chart or a table in order to make it easier to understand and analyse. Transitions can be added too.
A few details about D3.js
D3.js — full name Data-Driven Documents — was created in 2011 by Mike Bostock. It is an open-source JavaScript library that lets you create customisable tables or charts from CSV or JSON data files. For anyone who used the Protovis library, D3.js is its successor.
The library is written using ES2015 modules, which are supported in most of the browsers people use. As for installation, for better performance it is preferable to download D3.js from GitHub, but you can also include it directly in your HTML files with a script tag (minified version).
Code to re-insert: the <script> tag shown in the French article was stripped during content extraction and must be copied back from the French version.
A few details about Chart.js
Chart.js was created in 2013 by Nick Downie. It is an open-source JavaScript library for drawing charts inside a <canvas> element. Chart.js offers eight different chart types for visualising your data: line, bar, bubble, scatter, area and radar charts, plus a pie chart in two different styles.
As for installation, you can download Chart.js from GitHub, but do not forget to build the dist files, which are no longer supplied with it. Otherwise an npm command in a Node.js environment works perfectly well too:npm install chart.js --save-dev
The weaknesses of these JavaScript libraries
These JavaScript libraries have been major steps forward in customising and embedding visual data. They often simplify the formatting of dynamic charts and tables — but they do come with some limitations.
D3.js, the controversial “best JavaScript library”
D3.js does not include every feature you might need in your projects, so it is up to you to build them. To obtain slightly more elaborate charts, you will almost certainly need to code a layer on top of an existing chart.
What’s more, if you have never come up against this library before, the way it works seems complex, and very little documentation is available to answer the problems you run into. Developers often prefer to use existing charts, found in the library’s gallery and very close to the result they want, and then add the missing elements, rather than programming everything themselves.
Chart.js, less choice
Chart.js is far less complete in terms of the charts it offers. As mentioned above, the library only includes eight different chart types. That may well seem sufficient — but it all depends on what you want to do with your charts. Many developers have already found themselves blocked by a lack of chart customisation.
Chart.js requires a huge number of parameters to be entered by hand in the JavaScript code; it is not done using data files. For simple charts this is not very complicated to configure, but for more complex charts you need to allow for time and patience.
The strengths of these graphical JavaScript libraries
Once you have got to grips with them, charting libraries unquestionably save developers time.
D3.js, a complete library
D3.js benefits from a large community around it and offers a well-stocked gallery of charts and animations. There are so many chart ideas that any project can find its ideal chart without really needing to customise it further. Plenty of effective animation and transition features are included. It is a complete library that can meet requirements without any additional tools.
D3.js includes a simplified JavaScript syntax. Selecting elements, for example, is simpler and faster and takes fewer lines of code.
Media to re-attach: the CodePen “Texte récupéré avec D3.Js” by Melanie (@mlazarus) is embedded here in the French article and was lost during content extraction.
The library stands out in particular for its ability to update the DOM in real time. The data is bound to the DOM, which means that any changes are taken into account automatically.
Chart.js, a simple and fast library
Speed is one of Chart.js’s strong points. Its light weight (50.49 kB for the minified version) and its use of canvas give it a considerable performance advantage in terms of speed.
Chart.js renders in HTML5, so the library works in all recent browsers. It is possible, however, by using a polyfill, to support older browsers such as IE8.
If you run into any difficulty, you will find the answer to your problem in the abundant documentation Chart.js provides. Admittedly you will probably have to dig around a little in all the available resources, but the answer is there.
So which one should you choose?
“Which data-visualisation library should I choose?” That is the whole question. In reality it all depends on the project and on the developer.
On the one hand there is Chart.js, described by everyone as much simpler to use. And that is true: for charts that do not involve much data and where a “basic” style of chart is fine, Chart.js is the right solution.
However, if your data calls for a more elaborate and customisable chart, then even though D3.js is more complex to begin with, it is better to go for that option. Chart.js will quickly limit you, whereas with D3.js your only limit is your imagination. That tells you just how much can be achieved with this JavaScript library!
If your concern is performance, bear in mind that Chart.js uses canvas, which — thanks to the evolution of the web — is now far more performant than the SVG used by D3.js.
Both libraries can of course be combined with most JavaScript frameworks, such as React, Svelte and Vue.js, and also with the Python programming language.
You now have everything you need to make your choice!
More articles on the Numendo blog.
