Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I show percentages in MudCharts?

Tags:

mudblazor

I have managed to make a basic donut chart with MudBlazor, but I can not figure out how to show the percentages of the data displayed. For instance, in the attached image I want to show 50% on each side and preferably in the middle of each half circle so it's clear which percentage belongs to the corresponding half circle.
Example chart
This is what I currently have:

    <MudChart ChartType="ChartType.Donut" Width="300px" Height="300px" InputData="@data" InputLabels="@labels">
</MudChart>

@code {
    public double[] data = { 77, 77 };
    public string[] labels = { "Oil", "Coal" };
}


Any help is much appreciated.

like image 224
Welle Avatar asked Dec 21 '25 17:12

Welle


1 Answers

I'm not sure if there is a solution for your question but you can put some information inside of the donut chart. See example below. I found it in the docs.

<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-size="2">Total</text>
        <text class="donut-inner-text" x="47%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" font-size="5">@data.Sum().ToString()</text>
    </CustomGraphics>
</MudChart>

enter image description here

like image 104
Matteoni Avatar answered Dec 24 '25 12:12

Matteoni



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!