DxChartBase.RefreshData() Method

Reloads data and redraws the chart component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void RefreshData()

Remarks

If the chart’s data source is a collection that implements the INotifyCollectionChanged interface, the chart component updates its Data property automatically each time the collection changes. For other data source types, use the RefreshData method. This method obtains the latest state of the data source and applies it to the chart.

The code below updates the chart on a button click:

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>
          <DxChartAxisLabel Format="ChartElementFormat.MonthAndDay" />
    </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();
    }
}

Data Source

public class DailyData
{
    public DateTime Date { get; set; }
    public int Value { get; set; }
}

private 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;
}

If the data source does not change, call the RedrawAsync method to re-render the chart.