Skip to main content
All docs
V24.2

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

DxChartAxisLabel.StaggeringSpacing Property

Specifies the space between two rows of axis labels when the Overlap or DisplayMode property is set to Stagger.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(5)]
[Parameter]
public double StaggeringSpacing { get; set; }

#Property Value

Type Default Description
Double 5

The space between two rows of labels in pixels.

#Remarks

The StaggeringSpacing property allows you to specify the space between two rows of axis labels. To enable staggered arrangement, set the Overlap or DisplayMode property to Stagger. Note that the value Stagger applies to horizontal axes only.

The following example arranges axis labels in two staggered rows:

razor
<DxChart Data="@WeatherForecasts">
    <DxChartTitle Text="Annual Weather in New York" />
    <DxChartLineSeries SummaryMethod="@(i => i.Average())"
                       Color="@Color.Gray"
                       ValueField="@((DetailedWeatherSummary i) => i.AverageTemperatureF)"
                       ArgumentField="@(i => new DateTime(2000, i.Date.Month, 1))"
                       Name="Temperature, °F"
                       Filter="@((DetailedWeatherSummary  i) => i.City == "NEW YORK")">
        @* ... *@
    </DxChartLineSeries>
    <DxChartLegend Visible="false" />
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Temperature, °F" />
    </DxChartValueAxis>
    <DxChartArgumentAxis>
        <DxChartAxisLabel Format="ChartElementFormat.Month"
                          DisplayMode="ChartAxisLabelDisplayMode.Stagger"
                          StaggeringSpacing="10" />
    </DxChartArgumentAxis>
</DxChart>

DxChartAxisLabel - StaggeringSpacing

Run Demo: Chart - Label Overlap

See Also