New to Telerik UI for Blazor? Download free 30-day trial

How to bind Chart to DataTable


Product Chart for Blazor


How to data bind the Telerik Blazor Chart to a DataTable?

How to use a DataTable as a data source for the Chart?


The Telerik UI for Blazor Chart does not support DataTable binding out of the box. To use DataTable instance as a data source for the series of the Chart you have to convert the DataTable to IEnumerable e.g. List.

Bind Chart to a converted DataTable

@using System.Data;
@using System.Dynamic;

        <ChartSeries Type="ChartSeriesType.Pie"
            <ChartSeriesLabels Visible="true"></ChartSeriesLabels>

@code {
    private List<ExpandoObject> Data { get; set; }

    protected override void OnInitialized()
        Data = ConvertDataTable(GetData(), "Value", "Name");

    private static DataTable GetData()
        var table = new DataTable();
        table.Columns.Add("Value", typeof(double));
        table.Columns.Add("Name", typeof(string));
        table.Rows.Add(1, "John");
        table.Rows.Add(5, "Peter");
        table.Rows.Add(6, "Paul");
        return table;

    private static List<ExpandoObject> ConvertDataTable(DataTable dt, string field, string categoryField)
        List<ExpandoObject> data = new List<ExpandoObject>();
        foreach (DataRow row in dt.Rows)
            var expando = new ExpandoObject() as IDictionary<string, object>;
            expando.Add(field, row[field]); 
            expando.Add(categoryField, row[categoryField]);
        return data;

See Also

In this article