6 ms·

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

17 points by rexreed 6y ago

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?

jimbobbango 6y ago
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
- jbreckmckye 6y ago
  Get React to give you a DOM reference and then run the D3 code with it during a post render callback or effect.
- rhodysurf 6y ago
  You can just use D3 for the layout work and render with an SVG in react and it works really well.
  - jimbobbango 6y ago
    its been a few years since i tried, thanks for the tip
sheunl 6y ago
Excel?
- jimbobbango 6y ago
  At work its Java Apache POI exporting Excel reports
- rexreed 6y ago
  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.
kzzzznot 6y ago
Highcharts is good, lots of demos with code on https://www.highcharts.com/demo https://www.highcharts.com/demo Easy enough to configure when you get used to it and powerful for complex data.
jbreckmckye 6y ago
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.
- rapidlua 6y ago
  > 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 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 https://LuaJIT.me to produce an interactive visualisation of a graph of traces in a JIT compiler.
- rendang 6y ago
  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.
  - rexreed 6y ago
    Seeing as Plotly.js describes themselves as "Plotly JavaScript Open Source Graphing Library" #1 is what I was going for in my question.
legg0myegg0 6y ago
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.
joshxyz 6y ago
Airbnb visx is coo coo coo coo coool check it out Edit: also uplot by leoniya (did i spell it right) for timeseries
- leeoniya 6y ago
  > did i spell it right almost ;) https://github.com/leeoniya/uPlot https://github.com/leeoniya/uPlot
catacombs 6y ago
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.
burnto 6y ago
Check out Vega Lite. It wraps D3 to facilitate charting use cases. https://observablehq.com/collection/@observablehq/observable-for-vega-lite https://observablehq.com/collection/@observablehq/observable...
- rexreed 6y ago
  Cool! How does it differ better/worse than Plotly?
koolk3ychain 6y ago
At least for graph / DAG visualization Vis.JS is absolutely incredible. It also interfaces with React.JS almost effortlessly.
rexreed 6y ago
Some other options: * Google Charts: https://developers.google.com/chart https://developers.google.com/chart * Chart.js: https://www.chartjs.org/ https://www.chartjs.org/

17 points by rexreed 6y ago

jimbobbango 6y ago

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

jbreckmckye 6y ago
Get React to give you a DOM reference and then run the D3 code with it during a post render callback or effect.
rhodysurf 6y ago
You can just use D3 for the layout work and render with an SVG in react and it works really well.
- jimbobbango 6y ago
  its been a few years since i tried, thanks for the tip

sheunl 6y ago

Excel?

jimbobbango 6y ago
At work its Java Apache POI exporting Excel reports
rexreed 6y ago
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.

kzzzznot 6y ago

Highcharts is good, lots of demos with code on https://www.highcharts.com/demo https://www.highcharts.com/demo Easy enough to configure when you get used to it and powerful for complex data.

jbreckmckye 6y ago

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.

rapidlua 6y ago
> 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 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 https://LuaJIT.me to produce an interactive visualisation of a graph of traces in a JIT compiler.
rendang 6y ago
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.
- rexreed 6y ago
  Seeing as Plotly.js describes themselves as "Plotly JavaScript Open Source Graphing Library" #1 is what I was going for in my question.

legg0myegg0 6y ago

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.

joshxyz 6y ago

Airbnb visx is coo coo coo coo coool check it out Edit: also uplot by leoniya (did i spell it right) for timeseries

leeoniya 6y ago
> did i spell it right almost ;) https://github.com/leeoniya/uPlot https://github.com/leeoniya/uPlot

catacombs 6y ago

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.

burnto 6y ago

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

rexreed 6y ago
Cool! How does it differ better/worse than Plotly?

koolk3ychain 6y ago

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

rexreed 6y ago

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