Skip to main content
All docs
V25.1
  • DxRangeSelectorScaleMarker Class

    Contains settings for scale markers.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    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

    <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