Donut Chart

Basic Donut

Fossil
Nuclear
Solar
Wind
Selected portion of the chart: -1
<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.Donut" Width="300px" Height="300px" @bind-SelectedIndex="Index" InputData="@data" InputLabels="@labels"></MudChart>
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
    <MudButton OnClick="AddDataSize" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
    <MudButton @onclick="RandomizeData" Variant="Variant.Filled" Class="mx-4">Randomize</MudButton>
    <MudButton OnClick="RemoveDataSize" Variant="Variant.Filled" Color="Color.Secondary">Remove</MudButton>  
</MudPaper>
<MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText>
@code {
    private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
    int dataSize = 4;
    public double[] data = { 50, 25, 20, 5 };
    public string[] labels = { "Fossil", "Nuclear", "Solar", "Wind", "Oil", "Coal", "Gas", "Biomass",
                                "Hydro", "Geothermal", "Nuclear Fusion", "Pumped Storage", "Solar", "Wind", "Oil",
                                "Coal", "Gas", "Biomass", "Hydro", "Geothermal" };

    Random random = new Random();

    void RandomizeData()
    {
        var new_data = new double[dataSize];
        for (int i = 0; i < new_data.Length; i++)
            new_data[i] = random.NextDouble() * 100;
        data = new_data;
        StateHasChanged();
    }

    void AddDataSize()
    {
        if (dataSize < 20)
        {
            dataSize = dataSize + 1;
            RandomizeData();
        }
    }
    void RemoveDataSize()
    {
        if (dataSize > 0)
        {
            dataSize = dataSize - 1;
            RandomizeData();
        }
    }
}
Legend Position

Oil
Coal
Gas
Biomass
<MudChart ChartType="ChartType.Donut" LegendPosition="@LegendPosition" Width="300px" Height="300px"
          InputData="@data" InputLabels="@labels">
</MudChart>


<MudSelect Label="Legend Position" Variant="Variant.Outlined" Dense="true" T="@Position" ValueChanged="OnSelectedValue" Class="mt-4">
    <MudSelectItem T="Position" Value="Position.Top">Top</MudSelectItem>
    <MudSelectItem T="Position" Value="Position.Left">Left</MudSelectItem>
    <MudSelectItem T="Position" Value="Position.Right">Right</MudSelectItem>
    <MudSelectItem T="Position" Value="Position.Bottom">Bottom</MudSelectItem>
    <MudSelectItem T="Position" Value="Position.Start">Start</MudSelectItem>
    <MudSelectItem T="Position" Value="Position.End">End</MudSelectItem>
</MudSelect>
@code {
    public double[] data = { 25, 77, 28, 5 };
    public string[] labels = { "Oil", "Coal", "Gas", "Biomass" };

    public Position LegendPosition { get; set; } = Position.Bottom;

    private void OnSelectedValue(Position value)
    {
        switch(value)
        {
            case Position.Top:
                LegendPosition = Position.Top;
                break;
            case Position.Left:
                LegendPosition = Position.Left;
                break;
            case Position.Right:
                LegendPosition = Position.Right;
                break;
            case Position.Bottom:
                LegendPosition = Position.Bottom;
                break;
            case Position.Start:
                LegendPosition = Position.Start;
                break;
            case Position.End:
                LegendPosition = Position.End;
                break;
        }
    }
}
Custom SVG Content

Total 135
Oil
Coal
Gas
Biomass
<MudChart ChartType="ChartType.Donut" Width="300px" Height="300px" InputData="@data" InputLabels="@labels">
    <CustomGraphics>
        <text class="donut-inner-text" x="47%" y="35%" dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="2">Total</text>
        <text class="donut-inner-text" x="47%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="5">@data.Sum().ToString()</text>
    </CustomGraphics>
</MudChart>
@code {
    public double[] data = { 25, 77, 28, 5 };
    public string[] labels = { "Oil", "Coal", "Gas", "Biomass" };
}
An unhandled error has occurred. Reload 🗙