Chart - Data Binding

This sample shows how to bind chart data using Items, XValueMember, and YValueMembers — the same approach used in ASP.NET Web Forms. Instead of manually creating DataPoint objects, you bind directly to your business objects.

Basic Data Binding

Bind a list of business objects to the chart using the Items property. Specify which properties to use for X and Y values.

---

Web Forms vs Blazor Comparison

ASP.NET Web Forms (Before)

<asp:Chart ID="Chart1" runat="server" Width="600" Height="400" Palette="BrightPastel">
    <Titles>
        <asp:Title Text="Monthly Sales — 2025" />
    </Titles>
    <ChartAreas>
        <asp:ChartArea Name="MainArea">
            <AxisX Title="Month" />
            <AxisY Title="Sales ($)" />
        </asp:ChartArea>
    </ChartAreas>
    <Series>
        <asp:Series Name="Sales"
            ChartType="Column"
            ChartArea="MainArea"
            XValueMember="Month"
            YValueMembers="Amount" />
    </Series>
</asp:Chart>

// Code-behind:
Chart1.DataSource = salesData;
Chart1.DataBind();

Blazor (After)

<Chart ChartWidth="600px" ChartHeight="400px" Palette="ChartPalette.BrightPastel">
    <ChartTitle Text="Monthly Sales — 2025" />
    <ChartLegend Name="Default" />
    <ChartArea Name="MainArea"
        AxisX="@(new Axis { Title = "Month" })"
        AxisY="@(new Axis { Title = "Sales ($)" })" />
    <ChartSeries Name="Sales"
        ChartType="SeriesChartType.Column"
        ChartArea="MainArea"
        Items="@salesData"
        XValueMember="Month"
        YValueMembers="Amount" />
</Chart>

@code {
    private List<SalesData> salesData = new()
    {
        new("Jan", 12500),
        new("Feb", 15200),
        new("Mar", 18900),
        // ...
    };
    
    public record SalesData(string Month, decimal Amount);
}

---

Using with Different Data Types

The Chart component can bind to any object type. Here's an example with website traffic data using int values: