Ask HN: What are the best charting / graphing JavaScript tools | Hacker News Reader

Ask HN: What are the best charting / graphing JavaScript tools

17 pointsrexreed20 comments

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?

View on HN

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.

Some other options:

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

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.

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.

Check out Vega Lite. It wraps D3 to facilitate charting use cases. https://observablehq.com/collection/@observablehq/observable...

Cool! How does it differ better/worse than Plotly?

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

Get React to give you a DOM reference and then run the D3 code with it during a post render callback or effect.

You can just use D3 for the layout work and render with an SVG in react and it works really well.

its been a few years since i tried, thanks for the tip

At least for graph / DAG visualization Vis.JS is absolutely incredible. It also interfaces with React.JS almost effortlessly.

Airbnb visx is coo coo coo coo coool check it out

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

> did i spell it right

almost ;)

https://github.com/leeoniya/uPlot

Excel?

At work its Java Apache POI exporting Excel reports

I'm looking for web-based real-time charting / graphing that uses Javascript. I don't think there's an excel rendering in Javascript that is embedable or free like DataTables if it does exist.

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.

> but the bundle is enormous - over a megabyte of data

If only DOT layout engine and JSON output format is enabled at compile time it is about 600KiB, or less than 200KiB Gzipped. https://github.com/rapidlua/viz.js

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

Indeed it’s super handy! I’m using this approach in https://LuaJIT.me to produce an interactive visualisation of a graph of traces in a JIT compiler.

While 'graph' can mean both 1) a synonym for 'chart' or 'plot' or 2) a graph as in graph theory, the word 'graphing' is far likelier to refer to the former definition.

Seeing as Plotly.js describes themselves as "Plotly JavaScript Open Source Graphing Library" #1 is what I was going for in my question.

Reply on news.ycombinator.com