Ask HN: What's the best charting library for customer-facing dashboards? Done some research and think chart.js seems like a great option. D3 seems powerful but might be complicated. Looking for simple + powerful, but maybe these are mutually exclusive... any advice? |
It’s built by folks from the same lab as D3, but designed as “a higher-level visual specification language on top of D3” [https://vega.github.io/vega/about/vega-and-d3/]
My favorite way to prototype a dashboard is to use Streamlit to lay things out and serve it and then use Altair [https://altair-viz.github.io/] to generate the Vega-Lite plots in Python. Then if you need to move to something besides Python to productionize, you can produce the same Vega-Lite definitions using the framework of your choice.
My favorite is Altair. It provides interactivity for charts, so you can move/zoom your plots and have tooltips. It is much lighter than Plotly after saving the notebook to ipynb file. Altair charts looks much better than in matplotlib. One drawback, that exporting to PDF doesn't work. To serve notebook as dashboard with code hidden, I use Mercury framework, you can check example https://runmercury.com/tutorials/vega-altair-dashboard/
disclaimer: I'm author of Mercury framework https://github.com/mljar/mercury
We use it for our online graphing in its native JavaScript form.
Nivo is a much simpler system that is styled by default and works much easier with React. If you're not doing complicated charts, it's my goto for the "I just want a nice line/pie/bar chart".
I also agree that the doc can be a little obtuse, but with examples + stackoverflow, you can figure things out.
Highcharts was something we originally were going to use but it's just too pricey.
[0]: https://echarts.apache.org/examples/en/editor.html?c=area-st...
[1]: https://echarts.apache.org/examples/en/editor.html?c=line-aq...
Charts that used to take me days to set up and data-wrangle now only take minutes.
I suppose this applies to other libraries but I like echarts.
I've been using echarts for 5+ years and I've yet to encounter a chart I couldn't make exactly like I needed.
It's pretty easy to configure and understand. It's the 80/20 principal of charts, it is 80% of D3 functionality for 20% the effort.
- mobile support works, but is poorly done - very heavy library to load - RAM intensive; a few charts w/ lots (e.g. ~100) data points spirals out of control (e.g. memory spikes from 60 MB to 700 MB). On mobile this basically guarantees that the tab crashes. - UI interactions feel laggy and lack responsiveness (e.g. panning is pure guesswork)
I thought the SVG vs canvas focus would be nice, but not at these costs.
If I needed more dense data viz (ex a datadog-like system) I'd probably go with something D3 based
It's fairly powerful but also looks more polished out of the box. Some limitations on styling but that depends on your application/use case.
Charting libraries are hard, Highcharts got a lot of things right back then and I don't think it's stopped since then.
If you start plotting a lot of data it can grow with you since it supports typed arrays and webgl rendering without undue boilerplate.
Disclaimer... I work for Plotly
I also failed when trying to create a nice violin plot as implemented with matplotlib in the Shap library.
That said I tried using other charting libraries but Plotly’s interactivity is a killer feature others don’t offer in the same way.
D3 is the king of data visualization written by Mike Bostock, a creative comp sci dude with incredible data viz and programming skills (love ya Mike)
The initial learning curve is kinda steep, but in reality it’s actually a really logical setup, you just need to build a few mental models. Without a doubt, I would pick D3. Top charting libs use D3 under the hood. It’s so god damn flexible you can build whatever you want.
Study d3indepth.com for a couple weeks, write a lot of code and watch some YouTube videos. The books are usually meh on this subject and outdated. Mike started Observable to make this passion of his profitable. It’s like Jupiter notebooks for visualizations using D3.
I’ve been wanting to write more and use visualizations to strengthen my writing and I’m picking a mix of D3 and standard JS/HTML to do it. Very satisfying
Once you grasp it, it starts feeling like magic in the very good sense of that. I think it’s worth doing 3-5 representative “here’s what I want; how do I do it in D3?” exercises before concluding that D3 is too complex.
I've kicked off a rewrite of an old Angular application that uses D3 in Blazor. I did a rather detailed tour of native Blazor charting libraries, and they all choked when given hundreds of datapoints.
I ended to deciding to wrap D3 for Blazor when we're ready to update that part.
We use them for all our charting needs (quite a bit!) at re-cap.com.
It's a low-code solution for customer-facing analytics but is super flexible and extensible with code. Embedding is available in React or Vanilla JS (no iFrames). You can build dashboards programmatically or with the no-code editor.
The backend query engine is also pretty powerful; performant and copes well with complex customer data structures.
unless you specifically need to handle >100(0) data points, then only uplot or charts js will be performant (for free)
Static charts similar to chart.js, but without all the javascript. I've found static charts are much easier to work with once print CSS layout becomes a requirement.
DATA: {json array}’
Dumping your data into the context window tends to help specify the task and focus the AI on the data structures to use.