Skip to main content
All docs
V25.1
  • DxRangeSelector.SelectedRangeUpdateMode Property

    Specifies how the selected range should behave if new values are added to the data source.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(ChartVisualRangeUpdateMode.Reset)]
    [Parameter]
    public ChartVisualRangeUpdateMode SelectedRangeUpdateMode { get; set; }

    Property Value

    Type Default Description
    ChartVisualRangeUpdateMode Reset

    An enumeration value.

    Available values:

    Name Description
    Shift

    The visual range matches the data range or whole axis length if DxChartAxisRange is defined. Applies to the argument axis only.

    Reset

    The visual range matches the data range.

    Keep

    The visual range does not change.

    Auto

    The range update behavior depends on both the axis type and its visual range. For a detailed explanation of this calculation, refer to the Automatic Range Calculation section.

    Remarks

    Use the SelectedRangeUpdateMode property to specify how the selected range should behave if new values are added to the data source.

    <DxButton Text="Add a new day" Click="(e) => GenerateNewItem()" />
    
    <DxRangeSelector Width="700px"
                     Data="@DataList"
                     SelectedRangeUpdateMode="ChartVisualRangeUpdateMode.Shift"
                     SelectedRangeLength="ChartAxisInterval.Days(3)">
        <DxRangeSelectorChart>
            <DxChartLineSeries T="DailyData"
                               TArgument="DateTime"
                               TValue="int"
                               ArgumentField="@(s => s.Date)"
                               ValueField="@(s => s.Value)" />
        </DxRangeSelectorChart>
        <DxRangeSelectorScale>
            <DxRangeSelectorScaleMarker>
                <DxRangeSelectorScaleMarkerLabel>
                    <DxTextFormatSettings Type="TextFormat.ShortDate" />
                </DxRangeSelectorScaleMarkerLabel>
            </DxRangeSelectorScaleMarker>
        </DxRangeSelectorScale>
    </DxRangeSelector>
    
    @code {
        public List<DailyData> DataList;
        protected override void OnInitialized() {
            DataList = GetData();
        }
    
        void GenerateNewItem() {
            DataList.Add(new DailyData() {
                Date = new DateTime(2020, 05, 20).AddDays(++DaysNum),
                Value = random.Next(10, 20)
            });
            DataList = new List<DailyData>(DataList);
        }
    }
    

    Automatic Range Calculation

    When the VisualRangeUpdateMode property is set to ChartVisualRangeUpdateMode.Auto, the axis type determines how the visual range is calculated when chart data is updated.

    Argument axis:

    • If the visual range is not set, the ChartVisualRangeUpdateMode.Auto is interpreted as ChartVisualRangeUpdateMode.Reset.
    • If only StartValue of the visual range is set, the ChartVisualRangeUpdateMode.Auto is interpreted as ChartVisualRangeUpdateMode.Shift.
    • If the EndValue of the visual range is set, the ChartVisualRangeUpdateMode.Auto is interpreted as ChartVisualRangeUpdateMode.Keep.

    Value axis:

    The ChartVisualRangeUpdateMode.Auto value inherits its behavior from the VisualRangeUpdateMode of the argument axis.

    • When the VisualRangeUpdateMode of the argument axis is ChartVisualRangeUpdateMode.Reset or ChartVisualRangeUpdateMode.Shift, the ChartVisualRangeUpdateMode.Auto is interpreted as ChartVisualRangeUpdateMode.Reset.
    • When the VisualRangeUpdateMode of the argument axis is ChartVisualRangeUpdateMode.Keep, the ChartVisualRangeUpdateMode.Auto is interpreted as ChartVisualRangeUpdateMode.Keep.

    Tip

    To freeze the visual range of the chart, set the VisualRangeUpdateMode of both axes to ChartVisualRangeUpdateMode.Keep.

    See Also