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 />
Performance wise, it didn't lag upto few month date ranges for daily data that arises out of user interaction. So not super dense like logs or telemetry measurements, but not that sparse either. I didn't really benchmark it with proper stress tests beyond checking if it worked for the usecase at hand.
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.
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.
Performance wise, it didn't lag upto few month date ranges for daily data that arises out of user interaction. So not super dense like logs or telemetry measurements, but not that sparse either. I didn't really benchmark it with proper stress tests beyond checking if it worked for the usecase at hand.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.