-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Floating point errors affect stacked bar charts.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal jsfiddle
I've made a fiddle forked off the stacked bar chart example in docs: http://jsfiddle.net/j36tveww/2/
Basically particular decimals will cause floating point errors. If you are trying to do a stacked percentage bar this can result in a bar being something like 100.0000000001%. The effect is that the Y axis ends up being larger than needed (say 1.2 rather than 1.0 as shown below).

If you were to inspect that first bar (Page A) and use react developer tools to look at the props, it'd look very similar as follows (following cap from my own project, jsfiddle and react tools not friends):

As you can see in the value array, it has 0.8900000000000001 as the first value - that's simply what you get with 0.56 + 0.33 in JS. The second value, 1.0000000000000002, is just the first with 0.11 added.
What is the expected behavior?
I can think of / StackOverflow some JS tricks to work around it, but it'd be nice to have some built in handling of floating point errors in recharts I think.
All that said (in my fiddling while making this issue), setting allowDataOverflow on the YAxis with a domain does cover the issue up. Perhaps that's all that's needed.
<YAxis domain={[0, 1]} allowDataOverflow/>Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?
My project yarn.lock reckons 1.0.0-beta.9 for recharts, but it affects what ever version the min.js that the jsfiddles use as well.
Chrome and firefox. Probably any browser given it's up to JS how to float.
I think it's a fair presumption that it affects all versions though.
Additional comments
This also affects stacked AreaCharts http://jsfiddle.net/cnbwzx6w/
