
Show HN: JavaScript Graphing Library Comparison - MayMuncher
http://www.jsgraphs.com/
======
aw3c2
This should really include [http://ecomfe.github.io/echarts/index-
en.html](http://ecomfe.github.io/echarts/index-en.html)

~~~
Cyph0n
Baidu huh. Those plots looks really slick. IE6+ support is quite the
accomplishment.

~~~
lalwanivikas
I agree with you. But why do you think IE6+ support is an accomplishment? Both
FusionCharts and HighCharts also support IE 6+

~~~
arpit-ispirato
I can vouch for that. I have been using FusionCharts[1] for some years now and
I have never faced any browser compatibility issues. But I can understand
Cyph0n sentiment here. It's amazing that they still support IE6+.

[1] [http://www.fusioncharts.com/](http://www.fusioncharts.com/)

------
h1fra
I always rely on Highcharts, probably the biggest library presented here.

Fit all the case (except map maybe) and flexible enough to let you change
everything if you or your designer want something very specific !

~~~
danielvinson
HighCharts is great, but it is prohibitively expensive for a startup to use in
their product.

~~~
elliott34
It's 90$ for a single web page that's not considered a web application, which
has a dubious definition "A web application is a website that has customer
specific data or charges for its use."

~~~
brianpgordon
Most tech startups probably aren't going to meet that definition. It looks
like a 1-developer license for a typical SaaS offering is going to run you
$390. Five developers is $1500.

------
kodablah
I think [http://nvd3.org/](http://nvd3.org/) should be added. It is the only
free/OSS that was able to do the complex combined graphs I needed for a recent
project.

~~~
wheaties
I wish they would open source the rest of the charts. When I worked there we
had some amazing visualizations that weren't included in the open source
portion.

~~~
kodablah
It seemed like the project went a bit dormant and Novus was not supporting it
that well so a community fork [1] was made that was just recently merged back
in [2]. I have seen the support uptick (though a tiny issue I made was closed
while still wrong before I made a PR [3]).

1 -
[https://github.com/nvd3-community/nvd3](https://github.com/nvd3-community/nvd3)
2 -
[https://github.com/novus/nvd3/releases/tag/v1.7.1](https://github.com/novus/nvd3/releases/tag/v1.7.1)
3 -
[https://github.com/novus/nvd3/issues/1033](https://github.com/novus/nvd3/issues/1033)

------
probdist
I find it wildly perplexing that there are so many frameworks and libraries
for javascript graphics and data visualization.

Wikipedia has a comparison matrix of _37_ different libraries.
[http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...](http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks)

Here is a list describing briefly at least 50 libraries:
[http://techslides.com/50-javascript-charting-and-graphics-
li...](http://techslides.com/50-javascript-charting-and-graphics-libraries)

~~~
slg
Yeah, it is ridiculous. We need to develop one universal graphic and data
visualization library that covers everyone's use cases.

~~~
andrepd
I get the sarcasm, but do you really need _37_ friggin libraries to cover
everyone's use cases in the relatively small field of JS graphing libraries?

~~~
pgwhalen
Why do say it's a relatively small field? Outside of mobile, the desktop web
is _the_ front end target in all of computing these days, and JS is the only
reasonable way to write for it.

------
rayshan
Missing Plottable.js by Palantir, a solid modular charting library based on
d3:
[https://github.com/palantir/plottable](https://github.com/palantir/plottable)

------
ohitsdom
Good stuff! What about D3?

[http://d3js.org/](http://d3js.org/)

~~~
th0ma5
I would consider D3 not to be a graph making library, but more a Data Frame &
Document Object Model data binding library with a collection of stats
functions.

~~~
sopooneo
Yeah. I consider D3 a good starting point to build a charting library on top
of.

------
welder
Great list! I personally use [http://c3js.org](http://c3js.org) for all charts
on [https://wakatime.com/](https://wakatime.com/) because it's easy to use
like highcharts, but comes with an open license. It's basically a wrapper
around d3.js for all the common reusable charts, which makes it very easy to
style and customize.

~~~
welder
Also, could you add "spline" chart type to the Graph Types filter? That chart
type is one of the reasons I chose c3.js over others.

[http://c3js.org/samples/chart_spline.html](http://c3js.org/samples/chart_spline.html)

------
AaronNewcomer
FusionCharts would be a good one to add. But then you will have to add like 40
more graph types as well

[http://www.fusioncharts.com/charts/](http://www.fusioncharts.com/charts/)

~~~
lalwanivikas
+1 Here are some business dashboards examples from FusionCharts:

[http://www.fusioncharts.com/dashboards/](http://www.fusioncharts.com/dashboards/)

------
gschrader
I see none of them have the option "Large Data Set", I would think dc.js
supports that with it's crossfilter support.

~~~
nawitus
The typical solution is to map the data into a smaller data set in the
backend, so you don't need to send 100k points to the browser.

~~~
capkutay
This. I've seen developers try to do all these crazy client-side optimizations
hoping it will make the graph drawing faster, when all they have to do is
sample the data in the server. You don't need an array of 1 million data
points to visualize the general sample.

------
edem
You might want to rephrase it to "Graph drawing" because there is the graph
data structure and I thought that this link was about graphs. It might be just
me but I can imagine people getting confused by the title.

~~~
ygra
As someone who works in that field, to me "graph drawing" relates even more to
drawing and arranging mathematical graphs of nodes and edges (called networks
on that site); the conference on that is called Graph Drawing, too. It's also
a frequent confusion of potential customers who ask us whether our library
handles line and bar "graphs" ...

------
buovjaga
Seems to be missing
[http://metricsgraphicsjs.org/](http://metricsgraphicsjs.org/)

------
tylerpachal
Can you add a `None` filter in the Dependancies section? After a quick look it
seems like there a few that would fall into this option.

~~~
MayMuncher
I like that idea, thanks!

~~~
Flenser
negative filters might be useful too. i.e. non-jQuery non-d3, or at least make
selecting multiple dependencies show the union of both sets, rather than the
empty intersection.

------
nirkalimi
Interestingly enough, I had a problem with ChartJS that no one seemed to be
able to remedy. It was quite bizarre and at first seemed to be a cross browser
issue, but after further investigation it seemed to just be some type of
strange cross-machine issue. See it here
[http://stackoverflow.com/questions/30063762/side-effects-
fro...](http://stackoverflow.com/questions/30063762/side-effects-from-chartjs-
for-only-some-clients)

Given that, I had to do some hacky stuff upon every refresh. Instead of using
destroy() on the canvas, I had to remove the Canvas DOM object itself,
building it back up, and inserting it again. Because of this I am a bit
skeptical about using ChartJS again, which is unfortunate because I do love
their Charts. I feel like maybe SVG might be the better way to go for
analytics.

~~~
etimberg
hey nirkalimi, I'm one of the maintainers of Chart.js. I know of a previous
issue where the behaviour you described occurred on devices with
window.devicePixelRatio greater than 1. Your JS fiddle didn't reproduce on my
machine and it appears to use v1.0.1 which was the version that fixed the bug
with devicePixelRatio. Calling destroy() on the chart object should be enough
to reset the canvas to it's original state. If you'd like, file an issue on
github and I can have a more detailed look.

------
thoman23
Very nicely done! I am just about to choose a charting library and this will
be a great help.

Have you considered adding some sort of user rating system? I find myself kind
of just wanting to know which one is most popular or highest rated (i.e. take
some of the work out of choosing between 30+ libraries myself).

~~~
lalwanivikas
IMO rating would be a difficult thing to do as there are many factors[1] to
consider. What best for one use case, might be the worst choice for another. A
more qualitative comparison would be more useful:

[http://www.fusioncharts.com/javascript-charting-
comparison/](http://www.fusioncharts.com/javascript-charting-comparison/)

[1] [http://davidwalsh.name/13-factors-choosing-javascript-
charti...](http://davidwalsh.name/13-factors-choosing-javascript-charting-
library)

------
vengaishiva
Non-developers on HN might find tools mentioned in this article useful:

[http://thenextweb.com/dd/2015/04/21/the-14-best-data-
visuali...](http://thenextweb.com/dd/2015/04/21/the-14-best-data-
visualization-tools/)

------
rcarmo
Neat. I've been maintaining a list of my own here:
[http://taoofmac.com/space/infoviz](http://taoofmac.com/space/infoviz) (no
fancy graphics, but a fair amount of notes)

------
Demiurge
I've been looking for a chart library to display timeseries graphs and
integrate well with react. The best one I found so far is react-d3.
Unfortunately, it's still somewhat awkward.

~~~
andreaferretti
Shameless plug: you may want to have a look at my library
[https://github.com/andreaferretti/paths-
js](https://github.com/andreaferretti/paths-js) which is made for exactly this
purpose. My frustration was that D3 wants to have control over the DOM, but
most frameworks let you write components in a declarative style using
templates or databinding. So I started paths-js , which takes the data as
input and provides an abstract description of the graph as output, that you
can then use in your framework to provide rendering. One of the demos that you
find on the page I linked is actually made with React

~~~
Demiurge
no shame, it could really help, thanks :)

------
mtmacdonald
Peek -
[http://mtmacdonald.github.io/peek/index.html](http://mtmacdonald.github.io/peek/index.html)
is also based on D3.

------
sergiotapia
Awesome site! I would love to see which ones are for Android, JS, of iOS. For
example, I'm actually looking for a charting library for iOS but can't seem to
filter for that. Here's another site I use to sort of see a lay-of-the-land
view of charting libraries:

[http://stackshare.io/charting-libraries](http://stackshare.io/charting-
libraries)

------
ne8il
[http://dimplejs.org/](http://dimplejs.org/) is another D3 based charting
library.

~~~
johnatwork
I've just looked at dimple. It looks quite a bit simpler than implementing d3,
I will have to play around with it, but from your experience how would you
rate it in terms of ease of use, learning curve, performance, etc.?

~~~
aw3c2
If you want to make graphs like those on their page, it's fun. But once you
want more it can be super annoying and hard to understand.

~~~
bshimmin
Yeah, my experience exactly. It's a great start if you're prototyping and your
initial use-cases map well to their demo pages. Once your designer gets
excited, you'll have to write a lot of code on top of it and may well consider
ditching it entirely.

------
lalwanivikas
You'll find this article helpful if you are wondering what all factors to
consider while choosing a JavaScript charting library:

[http://davidwalsh.name/13-factors-choosing-javascript-
charti...](http://davidwalsh.name/13-factors-choosing-javascript-charting-
library)

------
nitrogen
It would be fantastic if this comparison included average render times for
graphs of various dimensions and number of data points, and/or maximum number
of data points that can maintain a render time faster than 1/60s. Especially
on Firefox for Linux, which doesn't have Direct2D available.

------
hiamnew
It would be great if you split into free of cost and free software, at least
out-of-control vs self-hosted.

------
sycamorex
While we're on the topic, I'm beginning with js with a goal to create some
materials for maths classes. Which library would let me do, for example,
graphs of quadratic, cubic functions AND possibly drag/move the line to see
how the equation translates? Thank you

~~~
jostylr
Check out jsxgraph: [http://jsxgraph.uni-bayreuth.de/wp/](http://jsxgraph.uni-
bayreuth.de/wp/)

I wrote up a Newton's Method example a few years ago and it still holds up
well: [http://www.programmingmath.com/](http://www.programmingmath.com/)

------
jonahx
This is a fantastic idea. I've done these comparisons myself and it's
overwhelming and time-consuming.

Btw, I _love_ the animations for the filtering, the way the items contract and
rearrange themselves. What did you use for this?

------
declnz
Great work!

Just what I needed (a while ago, but again soon I'm sure). There are so many
options with JS graphing now, it can be a bit overwhelming just assessing the
options and their capabilities.

~~~
vengaishiva
It's no doubt a great work, but I kind of like this qualitative comparison
more:

[http://www.fusioncharts.com/javascript-charting-
comparison/](http://www.fusioncharts.com/javascript-charting-comparison/)

------
m_mueller
Very nice work. How about a graph type "arrow diagram" as a subtype of
"drawing"? One thing I'm missing a bit in the list is GraphViz style diagrams.

~~~
kzuberi
If you are interested in network visualization you might consider
Cytoscape.js. It's being used e.g. in bioinformatics (visualizing networks of
interacting genes, interactively inspecting & manipulating their layout etc).
Open-source license, and seems to be becoming quite featureful:

[http://js.cytoscape.org/](http://js.cytoscape.org/)

------
distantsounds
Are any of these charting solutions being actively used in a cacti-like
application? I feel like with how old the RRD technology is, something would
have replaced it by now.

------
andrepd
Nothing beats the power and flexibility of GNUPLOT. Still going strong after
almost 30 years, with excellent documentation and loads of support on the web,
too.

------
fiatjaf
Or, if you don't want to integrate any of them,
[http://chartspree.io/](http://chartspree.io/)

------
castell
What are the advantages of SVG or Canvas in that use case? Which one (SVG,
Canvas) is principle faster on current browser with thousands of data points?

~~~
1_player
Canvas is faster, as it basically is just a bitmap, while an SVG chart with a
million points would correspond to at least a million DOM elements.

~~~
castell
3 years ago, I benchmarks it with thousands of lines: SVG was faster than
Canvas in Internet Explorer 10, probably due their extensive long history with
their VML legacy rendering. But SVG was a lot slower in Chrome and Firefox
than Canvas probably due graphic card accelerated Canvas implementation. SVG
wasn't supported in Android 2.3.x. From my experience back then working
directly with raw-SVG in HTML5 wasn't a great experience SVG is based on XML
after all. Working with raw-Canvas meant implementing a basic render loop
myself which refreshes the area and the Text related API is a bit complicated
and slow.

~~~
ygra
SVG performance in IE (since IE9) has really been and is stellar, indeed.
Chrome caught up mostly by now and at least at work the difference between
Chrome and IE for certain tasks is that Chrome spends more time rendering and
IE spends more time JavaScripting. Firefox SVG performance has been
disappointing, mostly and mobile browsers are often better off with canvas as
well since performance is generally constrained there.

SVG performance in IE doesn't date back to VML, though. They just made
hardware-accelerated rendering a major feature of their browser back then,
while no one else was doing it properly. Similar to how Chrome started with
JITting JavaScript to make it fast and everyone else caught up on that
afterwards.

------
rubiquity
Thanks! It would also be nice if the license types of each library were
included as well. Graphing libraries for the web can be surprisingly
restrictive!

~~~
MayMuncher
Good thinking, adding soon!

------
marxdeveloper
What would be the most lightweight library if I only need a line graph
compatible with most desktop and mobile browsers without any dependencies?

~~~
Mahn
Dygraphs ([http://dygraphs.com/](http://dygraphs.com/)) has treated me well in
the past. No dependencies, tiny library, handles millions of points, and it's
html5 canvas based.

------
thom
Does anyone have any recommendations for nice boxes-and-lines JS library?
Drag-drop, constraints, force-directed layout, that sort of thing?

~~~
bluesmoon
There are D3 examples for all of these.

------
vitaut
It would be great if it was specified whether each library works offline for
comparison. For example, Google Charts don't work offline.

------
vegabook
31 libraries, zero for "Large Data Set".

That tells you everything you need to know about Javascript/browser graphics
for data science. A. The DOM cannot handle as many nodes as are needed for
large datasets and/or B. even with Canvas/webgl etc the browser platform
itself chokes on dataset sizes much bigger than 1/2 gig (ie, "small" data). So
Javascript is fantastic for explanatory graphics, but forget about
exploration.

~~~
nawitus
Humans typically can't comprehend 500 MiB of data in a chart well, so the
large data set is mapped into a smaller data set for visualization.

~~~
vegabook
Completely agreed. Problem is while you're exploring to find the correct
dimensional reduction / chuckout strategy, you're typically rapidly scanning
through lots of scatter plots / density plots / whatever in grids and my
experience is that the browser and javascript don't cut it here for reasons of
throughput. If it's not the DOM that's blocking things, it's the
commmunication channel to the browser that is too slow, and you can't dump all
your data into the browser to avoid the communication slowness, because it
then chokes. Chrome will barely allow a JS object a mere gig in size. Firefox
dies well before that. This is not to say that we're not moving in the right
direction on javascript/browser-based exploration, just that for now it's
premature. BTW I'm succesfully using Jupyter (ipython notebook) as a hybrid
solution. Bit of a best of both worlds. But then we're no longer talking JS
for the graphics.

------
FanaHOVA
I was just about to start looking for a graphing library for a dashboard I'm
building, thank you!

------
ppoint
Great stuff! Would be great if similar comparison existed for data grids
(tables).

~~~
lalwanivikas
Here you go: [http://www.fusioncharts.com/javascript-charting-
comparison/](http://www.fusioncharts.com/javascript-charting-comparison/)

------
zemanel
as someone that soon enough hopes to need evaluating graphing libraries for a
side project (implement the types of charts cachegrind [and similar] provide)
this post came at a great time.

~~~
nsrivast
I came here to post exactly the same thing! Teaching a data viz course shortly
and have to decide which library to use.

------
rco8786
Sure wish there were some performance comparisons

------
gt565k
you've got a typo in the title for one of them :)

XChats -> XCharts

