How to get rid of the extra spacing at the chart's left/ride side?

[ManuelRauber]

Hi,

I'm using the example you provided, bar_chart_sample1. When putting the chart in a SizedBox(width: 300, height: 300) and making the chart's background color red, there is spacing at the left and right side (see the yellow markers):

I have not found anything to get of that, so the chart just occupies the space it requires.

Is there any property I've overlooked?

Using alignment: BarChartAlignment.spaceBetween, is not an option, because I want to define the groupSpacing.

Thanks!

[nontravis]

+1

[alettsy]

It looks like the issue is due to how the spacing is calculated.

Basically, when you provide a groupSpace, it will space out the bars by that space unless the total width of the chart (bars + space between) would be greater than the container width. If that is the case, it ignores groupSpace and spaces each bar evenly, with a space at the beginning and end. This happens in the function spaceEvenly() in bar_chart_data_extension.dart.

This is proven if you set the width of the container to exactly the width of what the chart would be, it touches the edge:

If I reduced the width by one more pixel, it jumps and looks like your image above.

Currently, there is no way to resolve this except for making the container width equal to the chart width.

If your container width is larger than the chart width, then the only way to adjust the bars to take up the available space is to calculate the groupSpace based on your bar widths, number of bars, and container width.

I think we should add a property like bool shrinkWrapOnWidthOverflow which can be set in the chart data to run spaceEvenly in an altered way to ignore the start and end spaces.

I will work on adding this in 😊