search

oksktank / react-native-pure-chart

react-native chart library that not using svg or ART but only using react native pure components.
MIT License
288 stars 132 forks source link

LineChart: How to fit dynamic data in the graph #84

Open luatnd opened 5 years ago

luatnd commented 5 years ago

I have a chart showing daily data with ~40 points And yearly data with 175 points And I try to make the data fit on the screen so that users don't need to scroll to see the hidden data.

Is there any configuration to support this case?

As #21 : I can use <PureChart gap={gapSize} /> props but gapSize need to dynamically calculated. And the new problem is: label is very close with each other, label text was broken when gapSize is too small.

wjsoft08 commented 5 years ago

I believe what you are trying to do is not possible on the current version. But if you are interested I have made the change on my fork in develop branch.

To solve this I have added these props: showEveryNthXaxisLabel - specify int of every how many data you want to show X label. e.g. 3 xAxisTextLength - length of how long each of your xAxis label would be. e.g. 60

for gap prop value I suggest you use something like - (Dimensions.get('window').width/lengthOfYourDataPoints) - (50/lengthOfYourDataPoints)

I didn't make pull request for this because I think I can reimplement this much better If I have time