Changing appearance of MudBlazor Chart
Asked Answered
D

2

6

I have successfully created my chart using MudBlazor.Line chart. The component has some basic options, which are working OK. However, I want to change other things (legend font size, line color and thickness, etc.) I found an option called "ChartPallette", which is looking for a string[], but I have no clue what to include. This is never mentioned in any of their samples or documents. Has anyone figured a way to modify such items?

Ditchwater answered 5/11, 2021 at 3:37 Comment(0)
H
10

The charts were developed mainly by me and henon but before i could finish them, the library got very popular and i had to prioritize other more important things, sorry that docs and the charts themself are lacking that was never the idea. I always recommend Blazor Apex charts mean time: https://github.com/apexcharts/Blazor-ApexCharts

Regarding your question, ChartPalette takes a array of colors. it can be our in library material colors or HEX codes, probably even rgb/rgba but haven't tested.

 = { Colors.Blue.Accent3, Colors.Teal.Accent3,... }

 = { "#000", "#FFF", ... }

And to change the other things like font size, font color you would have to use CSS, while they are using the themes typography settings there is no way of separating the charts from the rest so it goes for the whole theme.

Hamforrd answered 5/11, 2021 at 12:42 Comment(4)
Thanks for the explanation - I understand. I checked out Apex Charts - pretty awesome. Apex Charts definitely works well with MudBlazor. Although my timing was terrible! I tried out Apex Charts in a standalone Blazor app - everything worked fine. I added the Charts to my MudBlazor project - many errors appeared. Turns out, Apex did an update inbetween my two projects, and made some pretty big changes in how graph series are defined. They changed the name of some of the major classes, which is what threw all the errors. I'm slow, but finally figured out what happened. Now, all is good.Ditchwater
I had the same question. Yeah the mud charts are very basic (got to be difficult to do this with just c#).Cavorelievo
just need a dotnet6 wrapper, lolCavorelievo
Where is that ChartPalette option? I cannot access it in the component like the inputLabels and inputdata ----Edit: Found it here -> #72586925Nervine
J
5

Question is MudBlazor, accepted answer is "ApexChart for Blazor" interesting.

Answer for MudBlazor is;

<MudChart ChartOptions="@(new() { ChartPalette = new[] { "#ad2643", "#9926ad", "#2c28ad" } })" 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-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,45,65 };
    public string[] labels = { "Oil", "Gas", "Water" };
}

Preview;

Preview

Snippet: https://try.mudblazor.com/snippet/GkGnOfaTSJWfUPoX

Jig answered 5/5, 2023 at 12:45 Comment(1)
Thanks! I was looking for a way to change the colors. I wonder why this isn't included in the API description.Manmade

© 2022 - 2024 — McMap. All rights reserved.