Skip to main content

DxChartRangeBarSeries<T, TArgument, TValue>.BarWidth Property

Specifies the width of individual bars in the series in pixels.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor


public int? BarWidth { get; set; }

Property Value

Type Default Description
Nullable<Int32> null

A value that defines the bar width in pixels.


The BarWidth property value cannot be greater than the maximum width available for a bar in the bar group. To calculate the maximum width, the chart divides the bar group width by the number of bars in the group. Use the series’s BarPadding property to specify bar padding as a percentage. The BarWidth property has a higher priority than the BarPadding property. Therefore, the BarPadding has no effect when BarWidth is specified.

The following image shows a chart with a bar series whose bar width is set to 80 pixels:

Bar width = 80 pixels

<DxChartRangeBarSeries ArgumentField="@((DataPoint i) => i.Arg)"
                       StartValueField="@((DataPoint i) => i.Value1)"
                       EndValueField="@((DataPoint i) => i.Value2)"
                       Name="Series 1"
                       BarWidth="80" />

You can use the chart’s BarGroupWidth and BarGroupPadding properties to configure the bar group width in multi-series charts. The BarGroupWidth property has a higher priority in single-series charts if the BarWidth and BarGroupWidth properties are set.

Bar Width and Bar Group Width

<DxChart BarGroupWidth="110">
    <DxChartRangeBarSeries BarWidth="30" />
    <DxChartRangeBarSeries BarWidth="30"/>
    <DxChartRangeBarSeries BarWidth="30"/>
See Also