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 asChartVisualRangeUpdateMode.Reset
. - If only StartValue of the visual range is set, the
ChartVisualRangeUpdateMode.Auto
is interpreted asChartVisualRangeUpdateMode.Shift
. - If the EndValue of the visual range is set, the
ChartVisualRangeUpdateMode.Auto
is interpreted asChartVisualRangeUpdateMode.Keep
.
Value axis:
The ChartVisualRangeUpdateMode.Auto
value inherits its behavior from the VisualRangeUpdateMode
of the argument axis.
- When the
VisualRangeUpdateMode
of the argument axis isChartVisualRangeUpdateMode.Reset
orChartVisualRangeUpdateMode.Shift
, theChartVisualRangeUpdateMode.Auto
is interpreted asChartVisualRangeUpdateMode.Reset
. - When the
VisualRangeUpdateMode
of the argument axis isChartVisualRangeUpdateMode.Keep
, theChartVisualRangeUpdateMode.Auto
is interpreted asChartVisualRangeUpdateMode.Keep
.
Tip
To freeze the visual range of the chart, set the VisualRangeUpdateMode
of both axes to ChartVisualRangeUpdateMode.Keep
.