New to Telerik UI for BlazorStart a free 30-day trial

How to Show Empty Chart Instead of the Default No Data Template

Environment

ProductChart for Blazor

Description

As of version 7.1.0 of Telerik UI for Blazor, the No Data Template was introduced for Charts in Blazor. In some scenarios, displaying an empty Chart, rather than the No Data template, is preferred when there is no data.

Solution

To display an empty Chart when there is no data, override the default theme styles with custom CSS. The following example demonstrates how to achieve an empty Chart display by hiding the No Data Template overlay through CSS.

<TelerikButton OnClick="@UpdateData">@ButtonContent</TelerikButton>
<br />
<TelerikChart @ref="ChartRef" Width="800px" Height="400px">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column"
                     Data="@ChartData"
                     Name="Product Sales"
                     Field="@nameof(ChartSeriesData.ProductSales)"
                     CategoryField="@nameof(ChartSeriesData.Year)">
        </ChartSeries>
    </ChartSeriesItems>
</TelerikChart>

<style>
    .k-chart-overlay {
        display: none;
    }
</style>

@code {
    private const string Add = "Add Data";
    private const string Remove = "Remove Data";

    private TelerikChart ChartRef { get; set; }
    private List<ChartSeriesData> ChartData { get; set; } = new ();
    private string ButtonContent { get; set; } = Add;

    private void UpdateData()
    {
        if (ChartData == null || ChartData?.Count() == 0)
        {
            ChartData = ChartSeriesData.GenerateData();
            ButtonContent = Remove;
        }
        else
        {
            // Clear the data
            ChartData = new List<ChartSeriesData>();
            ButtonContent = Add;
        }
        ChartRef.Refresh(); // Refresh the Chart
    }

    public class ChartSeriesData
    {
        public int ProductSales { get; set; }
        public int Year { get; set; }

        public static List<ChartSeriesData> GenerateData()
        {
            List<ChartSeriesData> data = new List<ChartSeriesData>
            {
                new ChartSeriesData { ProductSales = 120, Year = 2020 },
                new ChartSeriesData { ProductSales = 180, Year = 2021 },
                new ChartSeriesData { ProductSales = 150, Year = 2022 },
                new ChartSeriesData { ProductSales = 210, Year = 2023 },
                new ChartSeriesData { ProductSales = 90,  Year = 2024 }
            };

            return data;
        }
    }
}

See Also