MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Donut Chart

See Donut Chart API for parameter documentation.

Basic Donut

Fossile

Nuclear

Solar

Wind

Selected portion of the chart: -1
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 = { "Fossile", "Nuclear", "Solar", "Wind", "Oil", "Coal", "Gas", "Biomass",
                                "Hydro", "Geothermal", "Fossile", "Nuclear", "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

Top

Left

Right

Bottom

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChart ChartType="ChartType.Donut" LegendPosition="@LegendPosition" Width="300px" Height="300px"
          InputData="@data" InputLabels="@labels">
</MudChart>


<MudSelect Label="Legend Position" Variant="Variant.Outlined" OffsetY="true" 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>
</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;
        }
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙