DxChartBarSeriesBase<T, TArgument, TValue>.BarPadding Property

Specifies the padding between bars in bar groups, as a percentage.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public double? BarPadding { get; set; }

Property Value

Type	Default	Description
Nullable<Double>	null	A value from 0 to 1. 0 - no padding is added; 1 - the bar has the minimum possible width.

Remarks

The BarPadding property allows you to specify the bar padding of an individual series, as a percentage. Specify the series’s BarWidth and chart’s BarGroupWidth properties to set bar width and bar group width in pixels. The BarWidth and BarGroupWidth properties have a priority over the BarPadding property.

The images below show how BarPadding property values set for the Precipitation series affect its bars:

The following code specifies bar padding as 0.6 (60% of the maximum bar width), and consequently sets the bar width as 0.4 (40% of the maximum bar width):

Razor

<DxChartBarSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                  ValueField="@((WeatherForecast i) => i.Precipitation)"
                  Name="Precipitation" 
                  BarPadding=0.6>
   @*...*@
</DxChartBarSeries>

Bar Padding in Multi-Series Charts

The following images show multiple bar series with different BarPadding values. The BarPadding property adds only the right padding for the first bar in a bar group; for the last bar in bar groups – the left padding. For other bars, the BarPadding property value is split evenly between the left and right padding values.

Settings	Resulting Chart
series1.BarPadding=0.2 series2.BarPadding=0 series3.BarPadding=0
series1.BarPadding=0.2 series2.BarPadding=0.2 series3.BarPadding=0
series1.BarPadding=0 series2.BarPadding=0.2 series3.BarPadding=0.2
series1.BarPadding=0.2 series2.BarPadding=0.2 series3.BarPadding=0.2

Bar Padding and Bar Group Padding

In multi-series charts, you can use the BarGroupPadding property to configure left and right padding values for bar groups.

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)