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

DxRangeSelectorScaleMarker Class

Contains settings for scale markers.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxRangeSelectorScaleMarker :
    DxComplexSettingsComponent<DxRangeSelectorScaleMarker, RangeSelectorScaleMarkerModel>,
    IModelProvider<RangeSelectorScaleMarkerLabelModel>

#Remarks

Scale markers accompany the scale axis that displays DateTime values. A scale marker consists of a separator and label.

Range Selector - Scale Markers

Add a DxRangeSelectorScaleMarker object to the DxRangeSelectorScale component markup to configure settings of scale markers in DxRangeSelector.

Show Nested Component Structure

The DxRangeSelectorScaleMarker component allows you to specify the following properties at the component level:

Visible
Specifies whether scale markers are visible. Set this property to false to hide scale markers.
SeparatorHeight
Specifies the height of scale marker separators.
IndentFromScaleLabel
Specifies the vertical indent between scale markers and scale labels.
LabelLeftIndent | LabelTopIndent
Position scale marker labels relative to corresponding separators.

You can also add a DxRangeSelectorScaleMarkerLabel object to the DxRangeSelectorScaleMarker component markup to customize format settings of scale marker labels.

#Example

The following code snippet configures scale markers and their labels:

Range Selector - Scale Marker Customization

Razor
<DxRangeSelector Width="1000px"
                 Height="400px"
                 SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                 SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
    <DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
                          EndValue="@(new DateTime(2024, 6, 1))"
                          MinorTickInterval="ChartAxisInterval.Day"
                          TickInterval="ChartAxisInterval.Week"
                          MaxRange="ChartAxisInterval.Month"
                          MinRange="ChartAxisInterval.Week"
                          ValueType="ChartAxisDataType.DateTime">
        <DxRangeSelectorScaleMarker IndentFromScaleLabel="0"
                                    LabelLeftIndent="25"
                                    LabelTopIndent="20"
                                    SeparatorHeight="50">
            <DxRangeSelectorScaleMarkerLabel>
                <DxTextFormatSettings Type="TextFormat.MonthAndYear" />
            </DxRangeSelectorScaleMarkerLabel>
        </DxRangeSelectorScaleMarker>
    </DxRangeSelectorScale>
    <DxRangeSelectorSliderMarker>
        <DxTextFormatSettings Type="TextFormat.MonthAndDay" />
    </DxRangeSelectorSliderMarker>
</DxRangeSelector>

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorScaleMarkerModel>
DxComplexSettingsComponent<DxRangeSelectorScaleMarker, DevExpress.Blazor.Internal.RangeSelectorScaleMarkerModel>
DxRangeSelectorScaleMarker
See Also