ChartVisualRangeUpdateMode Enum

Lists update modes for the axis visual range.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum ChartVisualRangeUpdateMode

Members

Name	Description
Shift	The visual range moves to the axis end and keeps its length. Applies to argument axes only.
Reset	The visual range matches the data range.
Keep	The visual range does not change.
Auto	Keep if the visual range is specified; otherwise, Reset.

Related API Members

The following properties accept/return ChartVisualRangeUpdateMode values:

• DxChartAxis<T>.VisualRangeUpdateMode
• DxRangeSelector.SelectedRangeUpdateMode

Remarks

Use the VisualRangeUpdateMode property to specify how the visual range should behave when chart data is updated.

The following code snippet sets the visual range of the argument axis and shifts the range when a new data item is added:

Razor

<DxButton Text="Add a new day"
          Click="(e) => GenerateNewItem()">
</DxButton>

<DxChart Data="@DataList" @ref="Chart">
    <DxChartLineSeries T="DailyData" 
                       TArgument="DateTime" 
                       TValue="int"
                       ArgumentField="@(s => s.Date)" 
                       ValueField="@(s => s.Value)" />
    <DxChartArgumentAxis VisualRangeUpdateMode="ChartVisualRangeUpdateMode.Shift">
          <DxChartAxisRange StartValue="new DateTime(2020, 05, 14)"
                            EndValue="new DateTime(2020, 05, 20)" />
    </DxChartArgumentAxis>
    <DxChartLegend Visible="false" />
</DxChart>

@code {
    int DaysNum { get; set; } = 0;
    DxChart<DailyData> Chart;
    static readonly Random random = new Random();

    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)
        });
        Chart.RefreshData();
    }
}

DataSource

public class DailyData {
    public DateTime Date { get; set; }
    public int Value { get; set; }
}
public List<DailyData> DataList;
public List<DailyData> GetData() {
    DataList = new List<DailyData>();
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 12), Value = 22 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 13), Value = 18 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 14), Value = 19 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 15), Value = 14 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 16), Value = 15 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 17), Value = 18 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 18), Value = 24 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 19), Value = 21 });
    DataList.Add(new DailyData() { Date = new DateTime(2020, 05, 20), Value = 20 });
    return DataList;
}