Ask HN: What's the best charting library for customer-facing dashboards?

https://news.ycombinator.com/item?id=40196880

by rogansage • 2 years ago

122 59 2 years ago

news.ycombinator.com

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?

ok1984• 2 years ago

Did you consider Fusion Charts?

snide• 2 years ago

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".

AntonyGarand• 2 years 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_slash2• 2 years ago

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.

eatsyourtacos• 2 years ago

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.

037• 2 years ago

https://echarts.apache.org

ggregoire• 2 years ago

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.

whilenot-dev• 2 years ago

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...

sdesol2• 2 years ago

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.

beingflo• 2 years ago

I really enjoy using Observable Plot (https://observablehq.com/plot/). Made by the author of D3 but way simpler to use.

hbcondo714• 2 years ago

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

[1] https://aba.amarkota.com

[2] https://observablehq.com/framework/

[3] https://observablehq.com/@d3/treemap-component

champdebloom• 2 years ago

If you're using react, I really like Tremor: https://www.tremor.so/

anchen976• 2 years ago

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.

Cthulhu_• 2 years ago

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.

patwolf• 2 years ago

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.

akudha• 2 years ago

I am also a big fan of Highcharts. It is not cheap though, especially for projects that aren't making any money yet

cableshaft• 2 years ago

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.

ciscoriordan• 2 years ago

AG Charts is in a simple/powerful sweet spot.

jareklupinski• 2 years ago

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)

ushercakes• 2 years ago

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• 2 years 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

Rastonbury• 2 years ago

I like chartsjs, better than what a $200bn company in Salesforce can come up with..

callmeed• 2 years 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• 2 years ago

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.

arbuge• 2 years ago

+1. I use it in https://tagely.com and it works great.

PaywallBuster• 2 years ago

what's the closest you can get to Grafana like looking?

kfor• 2 years ago

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.

acomjean• 2 years ago

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.

pplonski86• 2 years ago

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

marban• 2 years ago

https://js.cytoscape.org

https://github.com/apexcharts/apexcharts.js/

https://github.com/andrewcourtice/ripl

https://unovis.dev

joewils• 2 years ago

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.

sprash• 2 years ago

Not powerful but extremely simple, especially if you want to avoid JavaScript at all cost:

https://chartscss.org

justincarter• 2 years ago

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.

url00• 2 years ago

Honestly, ChatGPT + D3 has been great for me. But YMMV of course.

_boffin_• 2 years ago

There are a lot of fantastic libraries out there that can work. Best? How do you define that?

gear54rus• 2 years ago

c3 is another built-on-top-of-d3 thingie: https://c3js.org/examples.html

siamese_puff2• 2 years ago

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

sokoloff• 2 years ago

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.

siamese_puff2• 2 years ago

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

gwbas1c• 2 years ago

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.

tharmas• 2 years ago

Many thanks for that link! Agree with all your points. D3.js is indeed an excellent library and worth learning.

nickzelei• 2 years ago

Chartjs looks great, but I've never used it so can't recommend personally. I've used https://recharts.org a lot with success.

klysm• 2 years ago

ECharts is pretty good

itomato• 2 years ago

Shout out to rrdtool if your criteria for best includes maturity

pzo• 2 years ago

Another alternative - I haven't tried this but bookmarked that one:

https://nivo.rocks (https://github.com/plouc/nivo)

devolymp• 2 years ago

We used Recharts to build our own opinionated charts at tremor.so

tomjakubowski• 2 years ago

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/

hughess• 2 years ago

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.

tommiegannert• 2 years ago

Plotly is based on D3. Has both open-source version and paid option.

https://plotly.com/javascript/

TN1ck• 2 years ago

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.

xbpx• 2 years ago

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

wismwasm• 2 years ago

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.

slake• 2 years ago

Apache Echarts. You run into constraints with most others after a point.

farseer• 2 years ago

If you have millions of data points and require real time performance then go for a paid solution like SciChart: https://www.scichart.com/

ilamparithi• 2 years ago

I used Apex Charts recently with VueJS. Happy with the exhaustive configuration options available for each charts. It worked well for my use case.

MattSWilliamson• 2 years ago

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.

pob944• 2 years ago

for SVG chart try: https://www.npmjs.com/package/next-chartist

Ask HN: What's the best charting library for customer-facing dashboards?

Related Stories