search

borisyankov / react-sparklines

Beautiful and expressive Sparklines React component
MIT License
2.83k stars 194 forks source link

Reference line for `min` and `max` is reverse #56

Open okonet opened 8 years ago

okonet commented 8 years ago 
<Sparklines width={100} height={20} margin={2} data={[0,1]}>
    <SparklinesReferenceLine type="min" />
</Sparklines>

should be at the bottom. Right now it looks like this:

2016-05-04 at 15 52

Same goes for max

okonet commented 8 years ago

Looking at code, it seems like all calculations are done on the scaled points and not original data set, which leads to wrong results. I.e. max([0,1]) => 1 but in SVG, [0, 1] is mapped in reverse coordinates: [18, 2] for the height set to 20. But max([18, 2]) => 18, which is the first point. This is clearly incorrect.

All calculations must occur on the original data set and then the value must be mapped using the scale function.

okonet commented 8 years ago

This is also why #30 happening

claude-abounegm commented 3 years ago

I was able to replicate this bug as well. You are correct, the values used are incorrect.

You can see that setting the height as 60 for example, you can use the reference line with custom value of 60 and that will be your min. A custom value of 0 will be your max.