DxChart<T>.BarGroupPadding Property

Specifies bar group left and right padding values as a percentage.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(0.3)]
[Parameter]
public double BarGroupPadding { get; set; }

Property Value

Type	Default	Description
Double	0.3	A value from 0 to 1. 0 - no padding is added; 1 - the bar group has the minimum width and bars in one group overlap each other.

Remarks

BarGroupPadding defines the summarized left and right padding values. For example, the image below shows a chart with the BarGroupPadding property set to 0.4 (0.2 + 0.2):

The change of BarGroupPadding affects bar width: the higher the BarGroupPadding property value the more narrow bars are drawn.

The following markup specifies a bar group padding:

Razor

<DxChart BarGroupPadding=0.4>
   @*...*@
</DxChart>

Use the chart’s BarGroupWidth property to specify the bar group width in pixels. The BarGroupPadding property value has no effect if it is set with the chart’s BarGroupWidth property.

Bar Padding and Bar Group Padding

You can also use the series’s BarPadding property to configure padding between individual bars within a bar group.The BarGroupPadding property has a higher priority in single-series charts than the BarPadding property if the BarPadding and BarGroupPadding properties are set.

The following images show a chart with different BarPadding and BarGroupPadding property values:

Settings	Resulting Chart
BarGroupPadding=0 BarPadding=0 (for each series)
BarGroupPadding=0.2 BarPadding=0 (for each series)
BarGroupPadding=0.2 BarPadding=0.2 (for each series)