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?
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".
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.
I really enjoy using Observable Plot (https://observablehq.com/plot/). Made by the author of D3 but way simpler to use.
We use highcharts to power most of our charting (we're an embedded analytics platform) and switched over from from chart.js
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.
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.
Disclaimer... I work for Plotly
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
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.
Another alternative - I haven't tried this but bookmarked that one:
I'd recommend Vizzly: https://www.vizzly.co.
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.
Whichever one looks best with the rest of your dashboard :)
unless you specifically need to handle >100(0) data points, then only uplot or charts js will be performant (for free)
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.
I have used d3 for a few years now and with ChatGPT I find it at least 50% easier to set it up and troubleshoot issues.
If you have millions of data points and require real time performance then go for a paid solution like SciChart: https://www.scichart.com/
Chartjs looks great, but I've never used it so can't recommend personally. I've used https://recharts.org a lot with success.
We use echarts at https://evidence.dev and have been quite happy with it. We do a lot of embedded analytics and it's worked well for us.
Plotly is based on D3. Has both open-source version and paid option.
Shout out to rrdtool if your criteria for best includes maturity
Not powerful but extremely simple, especially if you want to avoid JavaScript at all cost:
I used Apex Charts recently with VueJS. Happy with the exhaustive configuration options available for each charts. It worked well for my use case.
ECharts is pretty good
If you're using react, I really like Tremor: https://www.tremor.so/
AG Charts is in a simple/powerful sweet spot.
for SVG chart try: https://www.npmjs.com/package/next-chartist
Did you consider Fusion Charts?
Apache Echarts. You run into constraints with most others after a point.
We used Recharts to build our own opinionated charts at tremor.so
c3 is another built-on-top-of-d3 thingie: https://c3js.org/examples.html
what's the closest you can get to Grafana like looking?
There are a lot of fantastic libraries out there that can work. Best? How do you define that?
Honestly, ChatGPT + D3 has been great for me. But YMMV of course.
I like Vega-Lite: https://vega.github.io/vega-lite/
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.