Awesome JS Charting Libraries

A comparative analysis of D3.js, ECharts and Chart.js to identify the library fit for our usecase

Problem Statement:

Hey Folks, our use case for today is to have a maintainable and powerful charting library for our dashboard. For this, there exists an entire ecosystem of charting libraries. Charts allow us to better visualize and give insightful information about our data.

We have a good number of charting libraries built in JavaScript. We have collected a few libraries that can fulfil our requirements. Our requirements include a wider range of graphing options, control over both data and visualisation, and ease of development and maintenance.

These 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 any data visualisation.

JS Charting Library Options:

Some of the most popular ones that are catering our use case:

1. D3.js
2. ECharts
3. Chart.js

A deep dive into D3.js, ECharts and Chart.js:

Each library has its own pros and cons. We will be differentiating libraries with regard to the following:

1. What’s the learning curve? (quality of documentation, code complexity)
2. How much can the graphs be customized?
3. What’s the range of variety in graphs?
4. How well is the charting library been maintained till now by the community support or the authors?

We expect to assess a high-level comparison across libraries of the aforementioned factors (variety of charts, customisation, etc.), and the use case we perceive to be best suited to each charting library. We went through each of the above charting libraries and implemented them on our local environment.

High level comparison between D3.js, ECharts, Chart.js

To explore a bit further, we created the same chart across all 3 libraries. After the experimentation, the following are the comparative analysis we came across:

1. Learning Curve and Complexity:

The learning curve includes how much time it took to understand the library, how well the library is documented and are there open source examples available.

Following are the results of our assessment after implementing all three libraries separately.

The learning curve for D3 is high as it requires an understanding of its coding complexity.

For Eg: Creating each part of the graph like the x-axis, the y-axis, the path (through which the data is shown), the legend, the labels, the responsiveness, and interactivity, all take much time as they are all made from scratch. Even after all the time it took to create each piece, combining each part and making the building blocks work, will take more.

ECharts provides ready to go charts, it has its own options mapping on a JSON type language, containing a wide range of customizable properties to configure a chart of your requirement.

Lastly, Chart.js is an easy pluggable library. Chart.js has its own pre-defined charts which you can plug into your pages and play around with its properties but they are very limited in scope.

Below is the complexity based on a number of lines we wrote for the same type of chart with each library:

2. Customization:

D3 shines in the customisation arena. D3’s and ECharts’s granularity and modularity are exactly why designers and developers favour it as the medium for stunning and unique visualisations.

Chart.js offer numerous options that can be passed into a generator function, such as legend font size and thickness of a line. One more observation we found out: D3.js is SVG, Chart.js is canvas based and ECharts supports both SVG and canvas.

3. Range of Graphs:

Chart.js offers its users the popular graphs such as bar, line, area, scatter, radar, and pie, a nice breadth of options for most simple data visualisation projects. Even though Chart.js can offer many options, it definitely doesn’t cover the advanced graphing options.

In contrast, ECharts gives a variety of charts for customisation. And, D3 lets its coders create seven different categories of graphs, with about five or more specific graph types in each. D3 and ECharts, both provide highly custom visualisations.

We took the example of geo map and tried to implement it separately in all three libraries.

• D3.js

• ECharts

• Chart.js

Chart.js does not offer any direct support for representing data in maps.

4. Maintainability:

Maintainability refers to the maintenance of the charting library by the community of developers and authors. This is important for future enhancements of the library and helps developers cope with any blocker they face in the library. It's important to develop enhancements/features without impacting product development velocity.

All these libraries come up with well-written documentation and relevant examples for all sets of users.

A bit about ECharts, ECharts was originally created by Baidu ( Google for China ) and now it's under Apache Software Foundation. https://echarts.apache.org/zh/index.html The size of the community for this library is huge. A wide range of custom graphs are available even on top of its large examples and also give interactive charting capability. Apache ECharts is in use at Alibaba, Amazon, Baidu, GitLab, Intel, and Tencent, among others, as well as solutions such as Apache Superset data visualization software.

D3 and ECharts have a well-established community of developers that helps each other solve library problems and keeps introducing state of the art graphs to fulfil the demand of time.

On the other hand, Chart.js also has a wider community. But the community is restricted by the ability of the library.

Verdict:

Chart.js is an easy to use and the only library with the least learning curve and complexity. It’s a good library for a basic level requirement that does not expect any advanced level graph interaction or customizability.

D3 and ECharts are powerful, well established over time, highly customizable and with a wider range of graphing options. Both of these lack in terms of learning curve and complexity to implement. However, if your requirements demand you highly customisable graphs that have the ability to represent data on a highly granular level, then you can choose either.

The only point which gives ECharts a minor edge over D3 is the coding complexity. D3 is able to serve most of the requirements and also comes with a complex way of coding the graphs. Whereas ECharts has its own language which you can just play around with and come up with your own graphs by tweaking its properties.

Special Mention:

A special thanks to Saleha Shujaat, who is an equal contributor to this blog 🙌

Disclaimer:

Bazaar Technologies believes in sharing knowledge and freedom of expression, and it encourages it’s colleagues and friends to share knowledge, experiences and opinions in written form on it’s medium publication, in a hope that some people across the globe might find the content helpful. However the content shared in this post and other posts on this medium publication mostly describe and highlight the opinions of the authors, which might or might not be the actual and official perspective of Bazaar Technologies.