
Show HN: Frappe Charts – GitHub inspired JavaScript charting with zero dependencies - rushabh
https://frappe.github.io/charts/
======
polskibus
Impressive! What are the supported browsers? What are your plans going
forward?

~~~
pratu16x7
Supported across all major browsers :) We've covered much ground on the most
used charts (while the heatmap just happened to be something we needed) and
have the basic components down. That'll facilitate putting in, say, more axis
charts in future. We're sure of not running out of ideas, there are just so
many chart types out there :D

~~~
polskibus
Do you have a separate repo with unit tests? If not, how do you test the
charts?

~~~
rinchik
[https://rbcs-us.com/documents/Why-Most-Unit-Testing-is-
Waste...](https://rbcs-us.com/documents/Why-Most-Unit-Testing-is-Waste.pdf)

~~~
polskibus
I have really bad experience using controls that didn't have a large test
suite. They don't have to be "unit" , I just care about the ratio of the
number of state transitions it tests to possible state transitions. If that
library was written in typescript (or some other strongly typed language), I'd
been slightly less worried about the lack of tests, and possibly slightly more
convinced to try it out in its early stage.

~~~
rinchik
I agree, unit tests wouldn't be very useful here, i was thing that visual
regression tests with constant data, that capture graph image and compare with
older version for regressions would have been really nice here.

~~~
polskibus
As a side note: I find these kind of tests flaky, because the antialiasing
doesn't seem stable at constant resolution on the same machine & browsers when
you repeat tests. When you do a fuzzy compare (ie. allow for X pixels
difference), then you are always chasing the golden middle. A test I would
like to see for a control is trigger multiple state transitions (for example
change 5 properties of a chart), do assertions on the generated DOM.

Unless maybe some HNer knows how to do such SVG/picture testing non flaky?

------
prashnts
It's so good! I am thoroughly impressed with its performance and the dynamic
data binding. I discovered in comments that there's a frappe-gantt chart as
well, would be nice if such "extra" plugins were listed on homepage (since the
gantt example is even more impressive!).

All the best for the project. Are you looking for community contributions?

~~~
netchampfaris
Yes, community contributions are always welcome. Right now, we have
specifically covered the cases we needed for our product. So, it'd be cool if
we can make these as generic as possible.

------
keithnz
The biggest thing I find missing from most charts is their ability to
interactively and dynamically chart over a large data set.

I once found a chart ( can't find it again ) that was super ugly but had a
nice scheme for dynamically loading and caching data at different zoom levels
that made the chart very snappy

~~~
dnprock
You rarely can visualize anything meaningful of large dataset on screen. You
can draw 100k data points on screen easily. But human brain rarely can make
sense of those data points. What you need to do is to analyze and create
filters to present meaningful insights from the dataset.

------
taupefrancis
Nice work. The code itself is clear and concise also.

~~~
rushabh
Thank you! We tried many approaches, but the simplicity of object oriented UI
components is classic. Its much more refreshing to read old fashioned object
oriented code vs hybrid libraries that seem to be trending these days.

------
eridius
Is the annual heatmap supposed to be empty?

Also, for the clickable charts, clicking on the popover should count as well.
If the bar is really short it can be quite hard to click on, such as the 2007
entry in the first chart.

~~~
pratu16x7
We gave it too less data than it deserved I believe.

Thanks for reporting the click problem. Would you mind creating an issue at
GitHub, so that we can keep track?

------
jazoom
This looks great. Can I ask why you didn't use chart.js?

~~~
pratu16x7
The argument would be no different from all the products out there who design
their own UI (MUX, GitHub). Our framework Frappé (and product ERPNext) has a
great emphasis on minimal style, and we really wished the charts to be free of
visual clutter (not have too many measure markings for instance). Something
that even the customizing API should take care off. Chartjs is awesome and
very comprehensive, it just didn't go too well with our look and feel :)

~~~
jazoom
chart.js isn't perfect, but it's pretty easy to customise and remove/change
any element you don't like. I find it hard to believe it was easier for you to
create an entirely new charting library than to set the option to remove
ticks.

I'm not complaining because it's always good to have options and I really like
the look of your library. I just find it a very curious use of resources.

Of course, it's your business and you can do whatever you like with it
regardless of whether you have a good reason. :-)

------
harunurhan
Looks nice, 0 dependency, simple design but there is one issue...

I see that you don't have a single unit test or integration or functional etc.

Even if your in house developers know what they are doing (which is a myth,
stuff will break) it's going to be difficult accept contributions from
community without any tests that make (almost) sure existing features are
working with the changes.

~~~
sillysaurus3
Judge work by what it does, not by what it doesn't have.

Like users, programmers don't care whether programs have tests as long as it
does what it needs to do.

~~~
harunurhan
So I should wait until stuff starts breaking, then start complaining.

~~~
XR0CSWV3h3kZWg
If nothing breaks why would you complain?

~~~
harunurhan
In that case, I wouldn't. But I believe that it will happen eventually, this
is not a 10lines project, has many lines of code and since it's new, I expect
a lot to be changed. Then those changes are going to break features.

~~~
XR0CSWV3h3kZWg
If you are worried about them breaking it as they develop it, but like the
current implementation then just use the current implementation.

If you feel like having tests are a blocking feature for you then just watch
this issue:
[https://github.com/frappe/charts/issues/7](https://github.com/frappe/charts/issues/7)

------
pteredactyl
D3 doesn’t have dependencies. Why use this?

~~~
ryantbrown
D3 is not a charting library but a data visualization library with which one
can produce standard charts. The code required to create a simple line chart
in D3 spans dozens of lines, not including the data. Using a charting library
it is usually one or two (plus options).

~~~
cormacrelf
Lots of libs advertise 0 dependencies. I'm not fussed if a library depends on
D3 though. D3 is 80k gzipped, this is 15k gzipped, ChartJS is about 20k
gzipped. If you need one chart, sure, go for it.

But each of those libraries would be <5kb of D3-dependent code. With the added
benefit that:

1\. The code is much simpler and easier to understand and contribute to

2\. Knowing D3 means you can modify the visuals, fork the library, and
customize it without spending ages wading through unnecessary and unfamiliar
re-implementations of D3 primitives. So many requirements I've seen involve
tweaking visuals just far enough that a pre-baked library ceases to cut it.

3\. Chart authors can rely on those primitives for a less buggy experience,
given that they are tested and used elsewhere

4\. D3 already supports IE9+, which this library doesn't

5\. You have the power of D3 to build your own dataviz

~~~
pteredactyl
Yea, I’ve found similar use case where any custom work is much better off done
using raw d3.

------
avenoir
Well timed. I'm in the middle of trying to figure out how to replace some C3
charts. Looks very nice!

------
valar_m
Really nice work on this. Does it support pie charts currently? If not, any
plans to do so in the future?

~~~
pratu16x7
Check our take on why they weren't a priority for us, and we went with
percentage charts (the 'Why percentage?' link on the website):
[http://www.storytellingwithdata.com/blog/2011/07/death-to-
pi...](http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts)

------
sjroot
I noticed, when viewing the demos on my phone, that there were some issues
relating to responsiveness. Specifically, the axes labels were overlapping. Is
responsiveness a priority with this library?

Other than that, great work. I look forward to testing this out.

~~~
pratu16x7
> Is responsiveness a priority with this library?

It sure is. Just pushed a fix, thanks for reporting :) Do report any issues
you find over at
[https://github.com/frappe/charts/issues](https://github.com/frappe/charts/issues)

------
throwaway2016a
This look really nice. Great job.

------
boffinism
Question: For codebases that are all about package managers Yarn, what's best
practice for integrating something like this? Just push it into a 'vendor'
folder?

~~~
TheAceOfHearts
It depends on how the library is implemented, so you're expected to look at
the source.

If you're using something like Webpack and the library just places everything
on the global scope, you can configure exports-loader [0]. That way you can
reference the module as if it were written with CJS or ESM, without having to
change the source.

If it's not published on npm, you can reference the git repo along with the
specific release tag you want to use. My suggestion would be to fork the repo
and point to your fork in package.json, so things continue to work if the
original repo ever gets taken down.

[0] [https://webpack.js.org/loaders/exports-
loader/](https://webpack.js.org/loaders/exports-loader/)

------
bobrown101
Yeah this is really impressive. Right now I can't think of a use case for it
but if I need charts like this in the future I will most likely use this be
library.

------
m1
Any support for realtime/updating graphs on the fly?

------
techaddict009
This charts looks awesome. Will surely use in my next project. Can I know how
I can add two data points. I mean how to show two graph lines in single chart?

~~~
matt4077
The second example seems to do just that, if you switch to "line chart".

------
_ar7
Really cool that this is built completely from scratch. I expected a
dependency on something like d3 at least.

~~~
pratu16x7
Thanks! That just about answers the burning question: why another charting
library? It all boiled down to us needing some simple charts for our report
data; nothing fancy, just something that went with our classic design. All we
needed was some mappers to translate numbers to relatively sized shapes (or
positions). The graphs over at GitHub looked awesome to start the styles from;
from there on we focussed on making them generic.

------
dabernathy89
The annual heatmap is particularly cool, and not something I've seen in many
(any?) other libraries.

~~~
pratu16x7
We used cal-heatmap ([https://github.com/wa0x6e/cal-
heatmap](https://github.com/wa0x6e/cal-heatmap)) earlier. It's pretty neat.

~~~
dabernathy89
Looks awesome, thanks for sharing!

------
kapauldo
This is great. Thank you!

------
koolhead17
Looks Neat. Great work folks.

------
hackNightly
Well done!

------
mmcnl
No stacked bar charts, unfortunate. Looks really nice.

~~~
achillesr
it's called - "Contribution".

[https://i.imgur.com/gKQ7EMP.jpg](https://i.imgur.com/gKQ7EMP.jpg)

