6 ms·
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?
- MattSWilliamson 2y agoI'd recommend Vizzly: https://www.vizzly.co 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.
- pob944 2y agofor SVG chart try: https://www.npmjs.com/package/next-chartist https://www.npmjs.com/package/next-chartist
- ok1984 2y agoDid you consider Fusion Charts?
- snide 2y agoI'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".
- AntonyGarand 2y ago+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.
- rm_-rf_slash 2y agoEcharts 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.
- sdesol 2y agoCan you share some of your prompts that you have used?
- rm_-rf_slash 2y ago‘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.
- eatsyourtacos 2y agoWe'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.
- 037 2y agohttps://echarts.apache.org https://echarts.apache.org
- ggregoire 2y agoI 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.
- whilenot-dev 2y agoUnfortunately 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-stack-gradient https://echarts.apache.org/examples/en/editor.html?c=area-st... [1]: https://echarts.apache.org/examples/en/editor.html?c=line-aqi https://echarts.apache.org/examples/en/editor.html?c=line-aq...
- sdesol 2y agoI'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 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.
- beingflo 2y agoI really enjoy using Observable Plot (https://observablehq.com/plot/ https://observablehq.com/plot/). Made by the author of D3 but way simpler to use.
- hbcondo714 2y agoMe 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 [1] https://aba.amarkota.com https://aba.amarkota.com [2] https://observablehq.com/framework/ https://observablehq.com/framework/ [3] https://observablehq.com/@d3/treemap-component https://observablehq.com/@d3/treemap-component
- champdebloom 2y agoIf you're using react, I really like Tremor: https://www.tremor.so/ https://www.tremor.so/
- anchen976 2y agoWe 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.
- Cthulhu_ 2y agoHighcharts 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.
- patwolf 2y agoHighcharts 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.
- akudha 2y agoI am also a big fan of Highcharts. It is not cheap though, especially for projects that aren't making any money yet
- cableshaft 2y agoHighcharts is what some big financial clients I know use. It seems pretty solid and easy to learn and integrate from my experience with it.
- iamleppert 2y ago[flagged]
- eatsyourtacos 2y agoMaybe I misread your post but why was there no mention of crypto and synergies?
- ciscoriordan 2y agoAG Charts is in a simple/powerful sweet spot.
- jareklupinski 2y agoWhichever 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)
- ushercakes 2y agohttps://www.chartjs.org/ https://www.chartjs.org/ 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.
- saevarom 2y ago+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. [1] https://github.com/overcastsoftware/wagtailcharts https://github.com/overcastsoftware/wagtailcharts
- Rastonbury 2y agoI like chartsjs, better than what a $200bn company in Salesforce can come up with..
- callmeed 2y ago+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
- mr-wendel 2y agoDitto 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.
- 128keaton 2y ago[dead]
- arbuge 2y ago+1. I use it in https://tagely.com https://tagely.com and it works great.
- PaywallBuster 2y agowhat's the closest you can get to Grafana like looking?
- kfor 2y agoI like Vega-Lite: https://vega.github.io/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/ 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/ 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.
- acomjean 2y agoWe 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.
- pplonski86 2y agoI 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/ https://runmercury.com/tutorials/vega-altair-dashboard/ disclaimer: I'm author of Mercury framework https://github.com/mljar/mercury https://github.com/mljar/mercury
- marban 2y agohttps://js.cytoscape.org https://js.cytoscape.org https://github.com/apexcharts/apexcharts.js/ https://github.com/apexcharts/apexcharts.js/ https://github.com/andrewcourtice/ripl https://github.com/andrewcourtice/ripl https://unovis.dev https://unovis.dev
- joewils 2y agoIf print friendly reports are a requirement, I'd go with QuickChart (https://quickchart.io 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.
- deleted 2y ago[deleted]
- sprash 2y agoNot powerful but extremely simple, especially if you want to avoid JavaScript at all cost: https://chartscss.org https://chartscss.org
- justincarter 2y agoI 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.
- url00 2y agoHonestly, ChatGPT + D3 has been great for me. But YMMV of course.
- _boffin_ 2y agoThere are a lot of fantastic libraries out there that can work. Best? How do you define that?
- gear54rus 2y agoc3 is another built-on-top-of-d3 thingie: https://c3js.org/examples.html https://c3js.org/examples.html
- siamese_puff 2y agoAs 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
- sokoloff 2y agoCame 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.
- siamese_puff 2y agoExactly. 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
- gwbas1c 2y agoI 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.
- tharmas 2y ago
- nickzelei 2y agoChartjs looks great, but I've never used it so can't recommend personally. I've used https://recharts.org https://recharts.org a lot with success.
- klysm 2y agoECharts is pretty good
- itomato 2y agoShout out to rrdtool if your criteria for best includes maturity
- pzo 2y agoAnother alternative - I haven't tried this but bookmarked that one: https://nivo.rocks https://nivo.rocks (https://github.com/plouc/nivo https://github.com/plouc/nivo)
- devolymp 2y agoWe used Recharts to build our own opinionated charts at tremor.so
- tomjakubowski 2y agoTry 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/ https://perspective.finos.org/
- hughess 2y agoWe use echarts at https://evidence.dev https://evidence.dev and have been quite happy with it. We do a lot of embedded analytics and it's worked well for us.
- tommiegannert 2y agoPlotly is based on D3. Has both open-source version and paid option. https://plotly.com/javascript/ https://plotly.com/javascript/
- TN1ck 2y agoIf 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.
- xbpx 2y agoPlotly 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
- wismwasm 2y agoI 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.
- slake 2y agoApache Echarts. You run into constraints with most others after a point.
- farseer 2y agoIf you have millions of data points and require real time performance then go for a paid solution like SciChart: https://www.scichart.com/ https://www.scichart.com/
- ilamparithi 2y agoI used Apex Charts recently with VueJS. Happy with the exhaustive configuration options available for each charts. It worked well for my use case.