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="" InputLabels=""></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="" Width="300px" Height="300px" InputData="" InputLabels=""> </MudChart> <MudSelect Label="Legend Position" Variant="Variant.Outlined" Dense="true" T="" 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
Oil
Coal
Gas
Biomass
<MudChart ChartType="ChartType.Donut" Width="300px" Height="300px" InputData="" InputLabels=""> <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" }; }