Smoothing leads to cut-off at max and min values

[tlow92]

If using smoothing the graph is cut-off, when peaks lead to min or max values. This can be circumvented by artifically lowering the domain's min and increasing the max.

The problem is that manipulating the min and max can not be done pixelwise. A better approach would be to have some pixel-related value like the current inset or padding. Unfortunately padding is currently added to the View around the Line, so the graph is still cut-off.

Example without manipulation of min and max

Example substracting and adding 5 percent to min and max yDomain={{min: min-Math.abs(min*0.05), max: max+Math.abs(max*0.05)}}

[tlow92]

@N1ghtly Here is another example where its more visible. Should we add some kind of padding into the library for these cases?

Without smoothing, it is not cut off.

[CoryWritesCode]

Running into this issue also. Find any solutions @tlow92?

[tlow92]

Running into this issue also. Find any solutions @tlow92?

Unfortunately not. Only the workaround that I outlined in the initial post: Manipulating the min max values so that they are below and above the actual min max values of the graph.

[CoryWritesCode]

if I get some time I might try and take crack at fixing this. I'm not to keen on finding the min/max of my larger datasets I'm working with to have to do this. And this library seems to be one of the only decent ones that's maintained well with a smaller footprint for RN.

[adrian-burkhart]

@tlow92 Have you tried adding top padding to the padding prop of the <Chart /> component? Like this:

<Chart padding={{ left: 0, bottom: 0, right: 0, top: 50 }} >

And if yes, have you also tried fiddling around with the viewport prop of the <Chart /> component? Like this:

viewport={{size: { width: 3, height: 25 }}}

[tlow92]

@adrian-burkhart Unfortunately that did not really help. Fiddling with viewport can prevent the bottom cut-off (even though it's hard to get it working for dynamic values where it's depending on min, max values). But this does not work for cut-off at the top.

I created a snack to illustrate the issue. https://snack.expo.dev/@tlow92/react-native-responsive-linechart-cut-off Can also be reproduced in Web