Chart - Doughnut

A Doughnut chart showing a department budget breakdown. Doughnut charts are similar to pie charts but with a hollow center, making them useful for displaying proportional data with a cleaner look.

---

Source Code

<Chart ChartWidth="500px" ChartHeight="400px">
    <ChartTitle Text="Annual Department Budget Allocation" />
    <ChartLegend Name="Default" />
    <ChartArea Name="DoughnutArea" />
    <ChartSeries Name="Budget"
        ChartType="SeriesChartType.Doughnut"
        ChartArea="DoughnutArea"
        Points="@BudgetPoints" />
</Chart>

@code {

    private List<DataPoint> BudgetPoints = new()
    {
        new() { XValue = "Engineering", YValues = new[] { 35.0 }, Label = "Engineering" },
        new() { XValue = "Marketing", YValues = new[] { 20.0 }, Label = "Marketing" },
        new() { XValue = "Sales", YValues = new[] { 18.0 }, Label = "Sales" },
        new() { XValue = "Operations", YValues = new[] { 15.0 }, Label = "Operations" },
        new() { XValue = "HR", YValues = new[] { 7.0 }, Label = "HR" },
        new() { XValue = "Legal", YValues = new[] { 5.0 }, Label = "Legal" }
    };

}