DxChartBase.RedrawAsync() Method

Re-renders the chart component and its child components.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public Task RedrawAsync()

Returns

Type	Description
Task	The task that is completed when the chart is redrawn.

Remarks

The chart component redraws itself automatically when:

• A user resizes the browser window.
• The chart component is bound to an ObservableCollection<T> or BindingList<T> object and the bound object changes.

To force the chart to re-render the component, call the RedrawAsync method.

In the snippet below, the chart component is in the hidden <div> element. The chart is re-rendered when its parent container becomes visible.

Razor

<DxButton Text="Make Visble" Click="MakeDivVisible" />

<div class="@divClass">
    <DxPieChart Data="forecasts" @ref="Chart">
        <DxPieChartSeries ArgumentField="@((WeatherForecast i) => i.Date)"
                          ValueField="@((WeatherForecast i) => i.Precipitation)"
                          Name="Precipitation">
        </DxPieChartSeries>
        <DxChartLegend Visible="false" />
    </DxPieChart>
</div>

@code {
    DxPieChart<WeatherForecast> Chart;
    string divClass = "hidden";
    bool NeedsRedraw;
    void MakeDivVisible()
    {
        divClass = "visible";
        NeedsRedraw = true;
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (NeedsRedraw)
            await Chart.RedrawAsync();
        NeedsRedraw = false;
    }
    protected override void OnInitialized()
    {
        forecasts = GetForecast();
    }
}

CSS

.hidden {
    display: none;
}

.visible {
    display: block;
}

Data Source

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double Precipitation { get; set; }
}

private WeatherForecast[] forecasts;
public WeatherForecast[] GetForecast()
{
    WeatherForecast[] forecasts = new WeatherForecast[] {
            new WeatherForecast() { Date = new DateTime(2020, 05, 11), TemperatureC = 20,
                                    Precipitation = 5},
            new WeatherForecast() { Date = new DateTime(2020, 05, 12), TemperatureC = 22,
                                    Precipitation = 1.2},
            new WeatherForecast() { Date = new DateTime(2020, 05, 13), TemperatureC = 18,
                                    Precipitation = 0.8},
            new WeatherForecast() { Date = new DateTime(2020, 05, 14), TemperatureC = 19,
                                    Precipitation = 0.5},
            new WeatherForecast() { Date = new DateTime(2020, 05, 15), TemperatureC = 14,
                                    Precipitation = 3.3},
            new WeatherForecast() { Date = new DateTime(2020, 05, 16), TemperatureC = 15,
                                    Precipitation = 1.7},
            new WeatherForecast() { Date = new DateTime(2020, 05, 17), TemperatureC = 18,
                                    Precipitation = 1},
            new WeatherForecast() { Date = new DateTime(2020, 05, 18), TemperatureC = 24,
                                    Precipitation = 0.5},
            new WeatherForecast() { Date = new DateTime(2020, 05, 19), TemperatureC = 21,
                                    Precipitation = 4.4},
            new WeatherForecast() { Date = new DateTime(2020, 05, 20), TemperatureC = 20,
                                    Precipitation = 8.5}
        };
    return forecasts;
}

To update the chart when its data source collection changes, use the RefreshData method.