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>.BarWidth Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public int? BarWidth { get; set; }

#Property Value

Type Default Description
Nullable<Int32> null

A value that defines the bar width in pixels.

#Remarks

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"/>
</DxChart>
See Also