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? 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. 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/ disclaimer: I'm author of Mercury framework https://github.com/mljar/mercury We like Vega lite. I always find it gets me 95% of the way there very easily. It’s the best we’ve used. You can download as svgs too. We use it for our online graphing in its native JavaScript form. 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". I've been using Echarts for quite a while now and I really like it. You can see how I am using them at https://devboard.gitsense.com/ollama I also agree that the doc can be a little obtuse, but with examples + stackoverflow, you can figure things out. We've been using ECharts for many years now and it's great. Built some of our own overlays to create the charting json. Highcharts was something we originally were going to use but it's just too pricey. Unfortunately some of the examples[0,1] seem to lag quite a bit on Firefox with larger screens. [0]: https://echarts.apache.org/examples/en/editor.html?c=area-st... [1]: https://echarts.apache.org/examples/en/editor.html?c=line-aq... +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. Echarts isn’t hard to set up anymore now that GPT-4 takes care of the complexity. 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. Can you share some of your prompts that you have used? ‘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. 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. +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. +1 I use chartjs for the web version of fatgpt.ai. It easy to setup and you can get charts going very quickly. If I needed more dense data viz (ex a datadog-like system) I'd probably go with something D3 based +1. I use it in https://tagely.com and it works great. I like chartsjs, better than what a $200bn company in Salesforce can come up with.. I really enjoy using Observable Plot (https://observablehq.com/plot/). Made by the author of D3 but way simpler to use. 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 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. 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. I am also a big fan of Highcharts. It is not cheap though, especially for projects that aren't making any money yet 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. Highcharts is what some big financial clients I know use. It seems pretty solid and easy to learn and integrate from my experience with 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. Disclaimer... I work for Plotly 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. Many thanks for that link! Agree with all your points. D3.js is indeed an excellent library and worth learning. 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.