Extra line at the top of bar chart on Android

[ywongweb]

trafficstars

"react-native": "0.42.0",
"react-native-pathjs-charts": "0.0.26",  

Getting this extra line at the top of the chart that extends all the way to the highest bar. Anyone else having the same problem?

[marzolfb]

Yes, I've seen this in the example app too. I'm surprised no one (including myself) has filed an issue to address this. Thanks for taking note of it!

[mitesh-mutha]

Please fix this... I am facing this as well.........

[marzolfb]

This one is problematic. This behavior occurs only in Android and not iOS and its a problem with the react-native-svg library this library depends on. The current version this library is aligned with is react-native-svg 4.5.0. I just tried to upgrade react-native-svg to the latest version (5.1.7) and it does eliminate the extra line. However, due to a bug in that library in supporting text rotation, when you upgrade, the x-axis labels disappear. This is because the rotation angle is hard-coded at 45 degrees and because of the rnsvg bug that degree of rotation pushes everything out of view. If you change the angle from 45 to 5 you'll see how this bug is manifesting itself:

Now, we could make the rotation angle configurable which is asked for in #139 and default the angle to 0, so that labels are displayed. However thats a behavior change for anyone currently using the bar chart who are expecting x-axis labels rotated to 45 degrees. Furthermore, because of the bug in rnsvg, there is no way to rotate labels like we are doing today using rnsvg 4.5.0.

This one is going to remain open until the rnsvg bug gets addressed or a suitable workaround is found.