Blog

D3.js or Chartjs? Which to use when

In the world of data – visualization plays a keen role in portraying the data aptly. It enables you to make sense of it faster, and also observe interesting patterns that wouldn’t be apparent from looking only at stats.
We were faced with a similar issue – to choose an all-round visualization tool. Starting with Chartjs, we soon realized that relatively complex graphs with customization were impossible to make and the only open source project serving our need was “D3”.

Basically, the two libraries are –
Chartjs – Charting library which provides supports 6 basic chart types, best used for standard and simple graphs.
D3.js – It’s not a charting library; it is a powerful versatile tool which is best used for complex and non standard data visualizations. While you can use it to create conventional charts (bar, line, pie, etc.), it’s capable of so much more! Stuff like this is not possible to achieve through Chartjs.

To decide the tool according to usage, below is the comparison of D3.js and ChartJS
D3 Pros –

1. Variety of visualizations – As seen in the link above, data manipulation can easily generate non-standard visualizations for massive amounts of data. Some more interesting graphs can be seen here – heatmap1, radial1 etc.

2.Interactivity – D3.js offers incredible levels of interactivity! The charts are rendered in SVG (Scalable Vector Graphics) which enables us to interact with each element of the chart. Also, this helps in displaying tooltips and legends for the chart
(For clearer understanding, think of svg as a div in DOM. Similar to HTML, SVG is built into the document using elements, attributes, and styles.)

D3 Cons –
Well D3 has only one drawback (which tells us a lot about it, doesn’t it?) – Steep learning curve
The syntaxes are way more complex than Chartjs, because it involves creating each element of the chart. Where a simple Chartjs code for a bar chart would look like

var barChart = new Chart(ctx, { type: ‘bar’, data: data, options: options });

the same in D3js would not take less than a hundred lines! And this is where Chartjs takes over D3.js.

Chart.js Pros
Simple and elegant – Easy to implement as seen above, as long as we need only basic graphs – bar, line, pie etc. The chart.js documentation is well organized and provides detailed information on using each feature

Chart.js Cons

1. Non-interactive – The charts are canvas based (think of canvas as a photo). Similar to a picture, the chart is not interactive. The chart is a single HTML element so parts of it cannot be modified
2. Very basic graphs only – Chartjs only provides 6 chart types. For even little complex representations, we need to look for other options

Depending on the need, we can choose any of the two after weighing all the properties above. Below are our use cases where we achieved what was needed – through D3.

  • Heatmap which shows channel usage by time of day
  • Graph where range with the person’s age is highlighted

To start, here are Chartjs1 and D3js1 documentation.

By – Mahima Jindal, Senior Software Engineer

adminD3.js or Chartjs? Which to use when
Share this post

Join the conversation

Related Posts