HACKER Q&A
📣 rexreed

What are the best charting / graphing JavaScript tools


There are so many options for javascript-based charting and graphing solutions.

For those looking to embed charts and graphs on a website for reporting, what are the best options around today?

Would love to find something as featured and as simple to use as Datatables, for example, that works really quickly and easily for tables and tabular data.

Best ideas?

  👤 kzzzznot Accepted Answer ✓
Highcharts is good, lots of demos with code on https://www.highcharts.com/demo

Easy enough to configure when you get used to it and powerful for complex data.

👤 rexreed
Some other options:

* Google Charts: https://developers.google.com/chart * Chart.js: https://www.chartjs.org/

👤 catacombs
D3 is the best, free option. However, its documentation is atrocious, especially for new users. If you plan to learn, you'll rely on other resources. Luckily, there are numerous free tutorials and book available online.
👤 legg0myegg0
We use plotly.js! It is a layer built on top of D3 and has some great looking charts. It also has some statistical and 3D plots that come in handy for us.
👤 burnto
Check out Vega Lite. It wraps D3 to facilitate charting use cases. https://observablehq.com/collection/@observablehq/observable...
👤 jimbobbango
D3 js is well known, but it used to not work with React because of Reacts's virtual dom stuff, D3 works with the dom directly i beleive, i would assume there is an npm package that allows u to work with both,

React Charts library was nice if i remember correctly

👤 koolk3ychain
At least for graph / DAG visualization Vis.JS is absolutely incredible. It also interfaces with React.JS almost effortlessly.
👤 joshxyz
Airbnb visx is coo coo coo coo coool check it out

Edit: also uplot by leoniya (did i spell it right) for timeseries

👤 sheunl
Excel?
👤 jbreckmckye
Graphing and charting are quite different things. Charts are things like bar and pie visualisations. Graphs are networks of connections, like family trees or sequence diagrams.

If you want to visualise graphs, I have had good experiences using d3-graphviz, which can consume GraphViz DOT files - DOT is an excellent and well supported DSL for this job.

DOT lets you specify nodes and their edges quite concisely, apply positioning and ranking hints, and the d3 visualiser does a great job usually of laying out the nodes with minimal path crossover. You can then hook into the d3 selections to render however you please, generally in SVG.

A nice thing about having an SVG render is that it's very easy to attach events, and inline SVGs can be styled with CSS. So you could plot e.g. a network of CI tasks and set up a click to take you to a job summary, just like the CircleCI UI. Or visualise step functions, sagas or state machines in similar wise.

There is an actual WASM build of GraphViz compiled from C++ (you can find it on NPM) but the bundle is enormous - over a megabyte of data.

I suspect, however, that what you are really looking for is a charting library. In that case my suggestion is to purchase a license for HiCharts or another commercial product, rather than assemble something yourself through D3.