Apache ECharts 6

Props to them for keeping backwards compatibility. I always dread seeing these major releases, especially after being burned several times by the tire fire of react-router. Migrating a rather large project from 5.6 to 6.0 (10 chart types, around 1k charts in total) took maybe 15 minutes of work. IIRC the only breaking change was them moving the legend to the bottom, which was easy to revert by importing the old theme.

And all that for free. The project was using a commercial library until about a year ago; no regrets since moving to echarts.

Echarts is the best charting library when you need a full fledge solution. It is worth to know that you can reduce the bundle size with this:

https://echarts.apache.org/en/builder.html

I feel I've tried them all. Echarts is the best overall charting library. Fast, complete, easy to start, advanced options, looks great by default, good examples, server and client rendering, SVG and canvas.

My only complaint is the chart-data data structures. Each chart type takes a different structure and axis data structure. They bolted on a data table feature (columns and rows), but it's not as documented and last I tried, incomplete.

I've toyed with various JS charting libraries over the last 15 years and I always come back to Echarts. Other libraries always miss options you eventually need if you are trying to do anything non trivial (e.g. the last one I tried didn't support multiple Y axises). It's feature complete while not having the complexity of coding a chart from scratch with D3. Works well with React too.

I evaluated a lot of chart frameworks 3 years ago before choosing echarts. We use it in our real time database visualization to to display charts at 10+ frames per second: https://www.timestored.com/pulse/ it's proved to be an excellent choice. There's been only one essential feature that I couldn't achieve and rechecking the github issue I see they merged a fix so I'm going to have to upgrade. Great work. Thanks.

Their new chord chart is easily the clearest chord chart I've seen. Tooltips with directional arrows, clear gradients.

While I like echarts I have found it somewhat challenging to extend their functionality.

I wanted a Gantt chart and while I did achieve what I wanted it wasn't without having to delve into the their source and putting log statements everywhere.

I happen to be using ant design and I've had the same issues there.

Its a bit all over the place and the translations are not great, but i will stick with it.

I'm always thrilled to see eCharts mentioned anywhere. It is a highly featureful, complete solution for making sophisticated data-intense charts. Various commercial alternatives pale in comparison.

Recently tried a bunch of frontend charging libraries.

Disclaimer: I only tried line charts for time series X axis and bar charts for categorical X axis. No other charts. I had filters, group by and sort by options in control panel. Data was fetched everytime from database when control panel was modified, so no client side number crunching.

My requirements were:

Control panel at top (which I'll manage). Then a grid of charts below with synced cursors and zooms (toggleable).

Basically, grafana, but they're not necessarily time series graphs.

I found uPlot(which is iirc what grafana uses) and eCharts to be the handsdown winners. Within those two, I preferred eCharts as first of all uplot didn't have any docs, LLMs didn't really perform well, and also vue-eplot wrapper didn't work.

Secondly, eCharts had nice animations, which uPlot does not support and I understand why, but I just wanted it for this project. It's really neat, when you add a group by in your control panel the charts nicely animate and the legend shows up etc

The others just did not impress, highcharts, chart.js, c3.js, ag-grid.

But maybe they're better fit for another usecase.

Vue-echarts is such a nice wrapper too.

  // your refs from control panel inputs
  // chartOption = computed(() => make from inputs)
  // <v-chart :chartOption />

It is also ridiculously reliable. When you have empty/missing data there's no annoying try-catch or guards you have to do when rendering, it automatically shows an empty graph with the size you specified. The title and other decorations still remain.

It also works well inside flex/grid layouts. No nonsense with CSS needed.

Anyone ever tried switching from Highcharts to ECharts?

This is neat. Anyone using these for live charts with real time data?