Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartRangeBarSeries<T, TArgument, TValue>.BarPadding Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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 Series 1 series affect its bars:

BarPadding = 0.4 BarPadding = 0.9
Bar padding = 0.4 Bar padding = 0.9

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

@page "/"
@using System.Drawing

<DxChart @ref="@chart"
         Data="@dataPoints"
         Width=700 Height=400 
         BarGroupPadding = "0.3">
    <DxChartRangeBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                           StartValueField="@((DataPoint i) => i.Value1)"
                           EndValueField="@((DataPoint i) => i.Value2)"
                           Name="Series 1"
                           BarPadding="0.4" />
    <DxChartRangeBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                           StartValueField="@((DataPoint i) => i.Value3)"
                           EndValueField="@((DataPoint i) => i.Value4)"
                           Name="Series 2" />
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxChart>

#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
Case 1 - Series with different BarPadding values
series1.BarPadding=0.2
series2.BarPadding=0.2
series3.BarPadding=0
Case 2 - Series with different BarPadding values
series1.BarPadding=0
series2.BarPadding=0.2
series3.BarPadding=0.2
Case 3 - Series with different BarPadding values
series1.BarPadding=0.2
series2.BarPadding=0.2
series3.BarPadding=0.2
Case 4 - 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)
Case 1 - BarGroupPadding=0;BarPadding=0
BarGroupPadding=0.2
BarPadding=0 (for each series)
Case 2 - BarGroupPadding=0.2;BarPadding=0
BarGroupPadding=0.2
BarPadding=0.2 (for each series)
Case 3 - BarGroupPadding=0.2;BarPadding=0.2
See Also