Chart - Stacked Column

A Stacked Column chart showing quarterly revenue by product line. Stacked columns display multiple series stacked on top of each other, making it easy to compare both individual contributions and totals across categories.

---

Source Code

<Chart ChartWidth="600px" ChartHeight="400px">
    <ChartTitle Text="Quarterly Revenue by Product Line" />
    <ChartLegend Name="Default" />
    <ChartArea Name="StackedArea"
        AxisX="@(new Axis { Title = "Quarter" })"
        AxisY="@(new Axis { Title = "Revenue ($K)" })" />
    <ChartSeries Name="Desktop"
        ChartType="SeriesChartType.StackedColumn"
        ChartArea="StackedArea"
        Points="@DesktopPoints" />
    <ChartSeries Name="Mobile"
        ChartType="SeriesChartType.StackedColumn"
        ChartArea="StackedArea"
        Points="@MobilePoints" />
    <ChartSeries Name="Cloud"
        ChartType="SeriesChartType.StackedColumn"
        ChartArea="StackedArea"
        Points="@CloudPoints" />
</Chart>

@code {

    private List<DataPoint> DesktopPoints = new()
    {
        new() { XValue = "Q1", YValues = new[] { 120.0 } },
        new() { XValue = "Q2", YValues = new[] { 115.0 } },
        new() { XValue = "Q3", YValues = new[] { 108.0 } },
        new() { XValue = "Q4", YValues = new[] { 130.0 } }
    };

    private List<DataPoint> MobilePoints = new()
    {
        new() { XValue = "Q1", YValues = new[] { 80.0 } },
        new() { XValue = "Q2", YValues = new[] { 95.0 } },
        new() { XValue = "Q3", YValues = new[] { 110.0 } },
        new() { XValue = "Q4", YValues = new[] { 125.0 } }
    };

    private List<DataPoint> CloudPoints = new()
    {
        new() { XValue = "Q1", YValues = new[] { 45.0 } },
        new() { XValue = "Q2", YValues = new[] { 65.0 } },
        new() { XValue = "Q3", YValues = new[] { 85.0 } },
        new() { XValue = "Q4", YValues = new[] { 110.0 } }
    };

}