Chart - Multi-Series

Multi-series charts display multiple data sets on the same chart for comparison. Add multiple <ChartSeries> child components to create a multi-series chart.

Comparing Two Data Sets

This chart compares online vs in-store revenue over 12 months. Both series use the same chart area and axis configuration.

---

Three-Way Comparison

Compare product categories across regions. Each series represents a different region's sales.

---

Line Chart with Multiple Series

Track multiple metrics over time with a multi-series line chart.

---

Source Code

<Chart ChartWidth="700px" ChartHeight="400px" Palette="ChartPalette.BrightPastel">
    <ChartTitle Text="Revenue Comparison — Online vs In-Store (2025)" />
    <ChartLegend Name="Default" />
    <ChartArea Name="RevenueArea"
        AxisX="@(new Axis { Title = "Month" })"
        AxisY="@(new Axis { Title = "Revenue ($K)" })" />
    <ChartSeries Name="Online"
        ChartType="SeriesChartType.Column"
        ChartArea="RevenueArea"
        Points="@onlineRevenue" />
    <ChartSeries Name="In-Store"
        ChartType="SeriesChartType.Column"
        ChartArea="RevenueArea"
        Points="@inStoreRevenue" />
</Chart>

@code {

    private List<DataPoint> onlineRevenue = new()
    {
        new() { XValue = "Jan", YValues = new[] { 45.0 } },
        new() { XValue = "Feb", YValues = new[] { 52.0 } },
        // ...
    };

    private List<DataPoint> inStoreRevenue = new()
    {
        new() { XValue = "Jan", YValues = new[] { 78.0 } },
        new() { XValue = "Feb", YValues = new[] { 72.0 } },
        // ...
    };

}