Redundant Space at top of Bar Chart about react-native-gifted-charts HOT 7 CLOSED

Thanks that works now.

from react-native-gifted-charts.

Sorry, also, is there a way that we can set the space on the left of the chart to 0 for times when we don't want the y axis showing?

from react-native-gifted-charts.

Hi @verofy-simon-denny 👋

Regarding your first question -

Yes, we can remove the extra padding at the top, by using the maxValue prop.

Here's a chart without using the maxValue prop-

The code for the above chart is -

const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
<BarChart backgroundColor={'red'} data={barData} />

Now, if we add maxValue={40} -

const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
<BarChart backgroundColor={'red'} maxValue={40} data={barData} />

The output becomes-

How it works-

If we don't provide the maxValue, it computes the maxValue as follows-
It takes the biggest value in the data array and the next reading on the y axis becomes the maxValue.
For example, in the above case, the biggest value in the data array is 40 so the next reading on y axis, i.e. 50 becomes the maxValue.

from react-native-gifted-charts.

Regarding your second question @verofy-simon-denny, you can wrap the <BarChart/> component in a <View/> and give the View some negative margin to the left.

Although it's a workaround, but for now this is the best way, and doesn't break anything as long as as we have hidden the y axis labels using the hideYAxisText prop

from react-native-gifted-charts.

Thank you for the answers, appreciate the time and the great library.

It makes sense, but I can't seem to set the height and max value at the same time, am I doing something wrong here?

I've used your example, but added height:

<BarChart backgroundColor={'red'} maxValue={40} data={barData} height={140} />

Many Thanks, Simon.

from react-native-gifted-charts.

Yes @verofy-simon-denny, Even I faced the same issue. But the fact is there's no issue as such. I reloaded the app and it worked like a charm💫✨

Please try reloading the app after changing any of these props- maxValue, stepValue, stepHeight, height
If it's not solved even after reloading, please do let me know, I will work on it.

from react-native-gifted-charts.

Thank you for the answers, appreciate the time and the great library.

It makes sense, but I can't seem to set the height and max value at the same time, am I doing something wrong here?

I've used your example, but added height:

<BarChart backgroundColor={'red'} maxValue={40} data={barData} height={140} />

Many Thanks, Simon.

Hi @verofy-simon-denny ,

I am facing the same issue. But it only happens when I use the topLabelComponent. Otherwise, it is working fine.

Please suggest any answer.

Thanks in advance.

from react-native-gifted-charts.