D3.js and Chart.js are two of the most popular JavaScript charting libraries. To date, D3.js has over 85,000 stars and Chart.js over 44,000 stars on [Github][github] so there's little doubting their popularity.

Both libraries enable the creation of common charts such as bar charts, line charts and scatter plots but their approaches differ significantly. Chart.js provides a selection of ready to go charts which can be styled and configured while D3 offers building blocks which are combined to create virtually any data visualisation.

Using a food analogy, D3 is like cooking a curry from scratch, combining onions, garlic, spices and vegetables to create a unique dish while Chart.js is like using a ready-made sauce. Cooking from scratch will yield a better meal (if the chef knows what they're doing) but will require more time, effort and experience. The ready-made sauce can yield a decent enough meal and certainly requires less time and effort.

Curry ingredients image by Marco Verch

D3.js

D3 enables developers to create bespoke, interactive data visualisations. It consists of a number of modules to help with tasks such as:

  • adding, removing and updating HTML/SVG elements
  • animation
  • interaction (e.g. zooming, panning, dragging)
  • arranging elements based on tree and network data structures
  • working with geographic data

Such tasks are the building blocks of a data visualisation. An experienced developer can combine these elements to create a bespoke data visualisation.

Chart.js

Chart.js provides ready made bar, line, pie and scatter charts. A minimal amount of coding and time is required to get a chart up and running. Charts also include a legend, hover pop-up and series toggling. They are also responsive to device size.

Charts can be configured. For example the legend can be displayed above, below or to the side of the chart. The look and feel of the chart can also be modified by changing background colour, line colours, line widths and more.

Chart.js renders its charts using the Canvas element which results in good performance compared with SVG, espcially when rendering a large amount of data. The other advantage of Canvas rendering is that it's relatively easy to download the chart as an image file.

Choosing between D3.js and Chart.js

For standard charts such as bar, line, pie and scatter plots, Chart.js is a good first choice as it'll require far less effort to create a working chart that includes a legend and hover pop-up. Creating such charts with D3 is a non-trivial undertaking especially when a legend, hover pop-up, series selection, grid lines, animations and responsiveness are required.

However for anything that isn't a standard chart D3.js is likely to be the right choice. Bespoke data visualisations such as Obama's Budget Proposal and a study of social networks from the Elephant Trust are created with the help of D3.

Performance-wise there isn't much to choose between D3.js and Chart.js. Both libraries comfortably handle thousands of data points.

Check out this Chart.js example which allows you to choose how many points to render:

See the Pen Chart.js speed test by Peter Cook (@createwithdata) on CodePen.

Comparison table


D3.js Chart.js
Building blocks for constructing data visualisations Ready to go charts
Composition of building blocks Configuration
SVG or Canvas Canvas
Interactivity requires coding Interactivity (tooltips, series selection) by default
Responsiveness requires coding Responsiveness by default
Legend requires coding Legend by default
Good for bespoke data visualisations Limited to standard charts

Conclusion

Both D3.js and Chart.js are excellent libraries for visualising data. Chart.js requires far less effort to create charts and should suffice in most cases, especially when standard charts are required. There's little limit to what D3.js can achieve but it'll likely require significantly more development effort than Chart.js.

If you're still not sure which to use my rule of thumb is: if you're wanting to make a standard chart (such as line, bar, pie, radar, scatter or bubble) try starting with Chart.js. If you're after something more bespoke then D3 might be a better choice.