Selecting the right data visualization library
From 2020 to 2023, I developed dashboards and mapping tools for a warehouse automation system using TypeScript, React and SVG.
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.
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?
- Blazing performance with a canvas renderer
- Modularity (I could include only the parts I needed)
- Composability (I could combine different chart types)
- Declarative API
- Great examples
- Robust documentation
- Fine control over the look and feel
- An insane selection of charts and graphs
- A great price (free)
- Open-source code
Here it is in action (with random data):
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:
ECharts proved to be extremely powerful yet easy to use—a rare combination!