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?
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.
I build dashboards in Jupyter Lab. My plotting libraries are Altair, matplotlib, seaborn, Plotly - all work well in notebook.
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/
I've messed with a few. I really like Apache Echarts if you're looking for an all-in-one-can-do-anything solution with a good license. The downsides are that the docs can sometimes be a little obtuse. There are adapters for almost every front-end at this point.
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".
+1 to echarts: While it can be more complex to start than the others, it remains fairly simple for the default graphs while providing enough flexibility to do pretty much anything.
‘Using echarts and provided DATA, demonstrate how to convert a table of rows such that the “value” is aggregated and shown on a bar chart as the sum of all “values” for each “timestamp”
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.
I just tried nivo in my last react project and eventually had to reinstall echarts-for-react since most of my charts have 2+ vertical axises with different scales and it's not supported in nivo (I read there is a hack with stacking multiple charts on top of each other, but in echarts it's just a 1 line option).
I've been using echarts for 5+ years and I've yet to encounter a chart I couldn't make exactly like I needed.
+1 for chart.js - use it for most charting needs and even created a Wagtail app[1] that uses Chart.js on the frontend to render charts based on user input.
Ditto here. I thought I'd try Apex Charts on my most recent project and regret it:
- 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.
Me too, I enjoyed creating a data dashboard static site[1] with Observable Framework[2] + Plot for their line and bar graphs. I did run into an inconvenience when I used d3 components outside of this combo that requires you to "copy-paste the entire function"[3] rather than just importing it
Highcharts is like "ol' reliable" when it comes to chart libraries, I first used it over ten years ago for a customer-facing investment banking webapp and as far as I know it's still around.
Charting libraries are hard, Highcharts got a lot of things right back then and I don't think it's stopped since then.
Highcharts is nice. My only complaint is that the type declarations are absolutely huge--like 300k lines. It makes my IDE grind to a halt when using TypeScript. However, the typescript compiler is unfazed by it.
Plotly offers more power and flexibility than chart.js and provides a much simpler API than D3 (it has D3 and webgl renderers).
The ecosystem is broad and includes React, Angular and other wrappers and language-interfaces for Python, Rust, Go, Scala and many others (incl Common Lisp).
If you start plotting a lot of data it can grow with you since it supports typed arrays and webgl rendering without undue boilerplate.
I like Plotly’s interactivity, but the Python API would be so much better if it was typed. I need to google which attributes to change to get anything done all the time. Copilot helps a bit but also constantly hallucinates plausible but not implemented plotly settings.
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.
Try Perspective, especially if you want users to be able to interact with the visualizations and update them - including re-aggregating the data https://perspective.finos.org/
As someone who has recently been deep diving D3 for fun, I will give you my opinion.
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
Came to say something similar. D3 starts out feeling like “magic” (in a bad way) until you wrap your head around the join/enter/update/exit model and how the various parts fit together.
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.
Exactly. I spent like a week or two building bar charts and line charts in various ways to learn the basics, which helps. Some stuff I see, like on Mikes blog is seemingly magic
I 2nd D3, especially if you have a lot of datapoints.
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.
If you need really custom charts and use react, I can recommend Visx. It’s a small wrapper around d3, that doesn’t really try to create their own abstractions, but mostly uses d3 conventions.
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.
If print friendly reports are a requirement, I'd go with QuickChart (https://quickchart.io.)
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.
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.