Published on

Charts for web applications

Authors

In this post, I have explained my journey for selecting a visualization tool. It is typical to finalize how visualization should be achieved in any serious application journey.

Objective

The analysis is done to identify charting libraries that can meet business requirements and are productive and flexible to customize.

Promising Charting Libraries

  1. VISX : "VISX a collection of expressive, low-level visualization primitives for React"
  2. Chart.js : "Simple yet flexible JavaScript charting library for the modern web"
  3. Apache ECharts : "A Declarative Framework for Rapid Construction of Web-based Visualization"

__

VISX

VISX

This library is a promising one on D3 with React Native primitives. It is our first choice for proof of concept by looking at what’s possible. As it is low-level, every small component has to be figured out. In-depth knowledge of D3 and SVG becomes crucial to ensure one opinionated component works for business. The same has to be repeated for many types of charts, which again requires a lot of person-hours. The more we get into depth, the more time we have to invest in making yet another perfect chart.

Its powerful for making the a great focused visualization, but required a lot of effort.

Chart.js

Chart JS

We have used Chart.js in the past. They are known for minimal API, perfection and speed. It just works. It’s a great library to start with. However, business demands more chart types and these additional chart types options are supported by individual contributors in community, which may or may not be maintained inline with the base library.

Its a great choice for lean visualization stack.

Apache ECharts

Apache ECharts

Apache ECharts is not based on D3 and it’s JavaScript-based till V4. Hence, more work is needed to set up for React or TypeScript apps. The latest release V5 of the library started first-hand support for TypeScript and JavaScript both, which has enabled options to use in web apps as well as in React-like frameworks.

It has more out-of-box options and the capability to customize charts. The out-of-box options and examples really solve many problems. With optimizations in V5 and more chart types support, it’s very attractive to try. After a few trials on various types, we are amazed at how fast we could make working business examples with V5.

In ECharts, animations are not as great as Chart.js or VISX. However, all other aspects of rendering options, theming and productivity are great.

Hence, Apache ECharts looks promising for us to proceed.

All 3 are great libraries, we have analysed. they solve different purposes, like VISX explicitly says its unopinionated and not a charting library. Depending on context all three libraries can solve problem pretty well and they are all well maintained.

Thanks for reading. Cheers!