Donut Chart

Basic Donut

Fossile

Nuclear

Solar

Wind

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" 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>
@code {
    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();
    public 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()
    {
        dataSize = dataSize + 1;
        RandomizeData();
    }
    void RemoveDataSize()
    {
        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 🗙