[SIP-50] Proposal for using ECharts as our main charting library

Motivation

When Superset was started back in 2015, the d3 library was the clear choice for building data visualizations, and nvd3 offered a nice set of reusable charts built on top of d3 that allowed hooks and callbacks that integrated nicely with d3 primitives. Over the past few years, the library has not been maintained actively and we’ve had to fork the project recently to ensure we could fix some bugs and to put it on life support. We got a lot of mileage out of the library and we’re grateful for that, but it’s beyond time to move on.

Superset has also grown to support 30+ visualizations that consists of a patchwork of libraries that are rooted in a vast dependency tree. This creates visual inconsistencies and many challenges around keeping up with different projects, people, APIs, code styles, levels of quality, …

Looking at the vast array of choice in the visualization libraries space here are some selection criteria:

• a vast library that offers a wide array of visualization types, but are consistent from a visual and an API standpoint
• a thriving, active and growing community
• a good governance model where we can get involved and have a path to contribute and influence direction
• a rich set of visualization primitives that enable extensibility
• performance: support for canvas rendering or alike
• “themeable”
• i18n support

Proposed Change

Standardize on using ECharts! as our primary visualization library for core visualization that ship with Superset.

This library checks all the boxes stated above and more:

• one of the most vast library out there
• governance: ECharts is also incubating at the Apache Software Foundation
• we established contact with the team and they are open to collaborate - both sides sees a lot of synergy potential

New or Changed Public Interfaces

We’ll be leveraging the plugin interface that has recently settled.

New dependencies

The ECharts library is surprisingly nimble and only depends on its rendering engine zrender which is managed and maintained by the same group of people. In the longer run, this could really help simplify our dependency tree and the risks that come with that, and perhaps help reduce our bundle sizes.

Migration Plan and Compatibility

The idea is to create new visualizations plugin that use ECharts and to progressively replace the existing visualizations with ECharts-powered visualizations. We may use one or many feature flag or other mechanisms to let administrator decide which set of charts they want to use in their environments while ECharts visualizations are maturing. We should also offer a migration path (through a database migration) to help our users migrate to the new core charts as they become core.

Rejected Alternatives

The hundreds of other amazing chart libraries out there. These can still be developed as plugins or plugins pack and shared as part of our growing plugin ecosystem. While we welcome for different plugins and plugin packs to be developed and shared by the community, this SIP is about setting the vision for the future of the core libraries that ship with Superset.

[junlincc]

We ran a performance comparison with same dataset in NVD3 and Echarts line chart on the dashboard. Applying time grain filter to compare going from time-grain = year (9 rows) -> quarter (33 rows) -> week (2.5k rows) -> no time grain (10k rows) At 2.5k rows, NVD3 takes much longer to render At 10k rows, stuck entirely…

By proofing Echarts migration’s benefits from ALL angles(functionality, performance, UX and extensibility), we hope to attract more people from the community to contribute and expedite this project.

Thanks for all the hard work of the superset-echarts team for the improvement @villebro @mayurnewase 🙏

cc @mistercrunch @srinify @eugeniamz @zuzana-vej @ktmud

[ktmud]

a) echarts does not seem to offer any dedicated visualizations for tables / pivot- tables ; is there a plan to leverage other libraries to improve this kind of data display (especially in terms of conditional formatting etc.)

We just had a big refactor on table chart and plan to do the same for pivot tables. You may not notice the difference but it paved ways for advanced features such as conditional formatting. No library provides conditional formatting out of the box, the majority of the work lies within Superset itself, so it doesn’t really matter which library we use for this specific feature.

b) will the move enable non temporal x-axis on line/bar charts, or is this an underlying issue not related to the charting library itself? #4185

We didn’t prioritize non temporal x-axis because we didn’t want to keep building new stuff based on nvd3, which we know will soon be deprecated. Once we start migrating line chart to Echarts (or any other better maintained libraries we eventually decide on), we’ll be sure to add this to the TODO-list.