Redundant Space at top of Bar Chart

[verofy-simon-denny]

Hi,

Just wondering if it's possible to get rid of the redundant space at the top of the bar chart - highlighted the background in red to show the space at the top:

Thanks

.

[verofy-simon-denny]

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?

[Abhinandan-Kushwaha]

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-

Notice the padding at the top is now gone!

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.

[Abhinandan-Kushwaha]

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

[verofy-simon-denny]

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.

[Abhinandan-Kushwaha]

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.

[verofy-simon-denny]

Thanks that works now.

[Hanuman-Ghawade]

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.