DxChart<T>.BarGroupWidth Property

Specifies the width of bar groups in pixels.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public int? BarGroupWidth { get; set; }

Property Value

Type	Default	Description
Nullable<Int32>	null	A value that specifies the bar group width in pixels.

Remarks

The BarGroupWidth value cannot be greater than the interval between two major axis ticks. You can use the series’s BarWidth property to set the bar width for individual series. The BarGroupWidth property has a higher priority in single-series charts if the BarWidth and BarGroupWidth properties are set.

The following image shows a chart whose bar group width is set to 30 pixels:

The markup below configures individual series’ bar width, and bar group width:

Razor

<DxChart BarGroupWidth=110>
    @*...*@
    <DxChartBarSeries BarWidth=30>
    </DxChartBarSeries>
    @*...*@
    <DxChartBarSeries BarWidth=30>
    </DxChartBarSeries>
    @*...*@
    <DxChartBarSeries BarWidth=30>
    </DxChartBarSeries>
</DxChart>

Use the chart’s BarGroupPadding property to specify bar group padding as a percentage. The change of BarGroupPadding affects bar width: the higher the BarGroupPadding value, the more narrow bars are drawn. The BarGroupPadding property is ignored if it is set with the BarGroupWidth property.