CODEWITHSUNDEEP
mudblazor
Welle
Welle

Reputation: 21

How can I show percentages in MudCharts?

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.

Upvotes: 2

Views: 1140

Answers (1)

Matteoni
Matteoni

Reputation: 97

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

Upvotes: 0

Related Questions