Selecting the right data visualization library

Background

From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript, React and SVG.

Problem

Our system generated a ton of time-series data but we had no way to visualize it inside our own applications. We needed to find a great data visualization library that was both easy to use and easy to customize.

Solution

I evaluated a half dozen data visualization libraries—including Chart.js, G2, and D3—and ultimately picked ECharts, which rendered the time-series charts pictured below:

What made ECharts stand out?

1. Blazing performance with a canvas renderer
2. Modularity (I could include only the parts I needed)
3. Composability (I could combine different chart types)
4. Declarative API
5. Great examples
6. Robust documentation
7. Fine control over the look and feel
8. An insane selection of charts and graphs
9. A great price (free)
10. Open-source code

Here it is in action (with random data):

The code

First, I wrote a wrapper component to make it easy for developers to instantiate and update a chart in React:

Then I created a higher-order TimeSeries component, enapsulating all the axis logic:

Finally, to render a time-series chart, a developer simply needed to provide the series data and configuration options:

Conclusion

ECharts proved to be extremely powerful yet easy to use—a rare combination!