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?

John Ogburn
  • 63
  • 1
  • 3

2 Answers2

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.

Bart Kiers
  • 166,582
  • 36
  • 299
  • 288
Jonny Larsson
  • 126
  • 1
  • 3
  • 1
    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. – John Ogburn Nov 10 '21 at 05:08
  • I had the same question. Yeah the mud charts are very basic (got to be difficult to do this with just c#). – MC9000 Nov 21 '21 at 19:35
  • just need a dotnet6 wrapper, lol – MC9000 Nov 21 '21 at 19:42
  • 1
    Where is that ChartPalette option? I cannot access it in the component like the inputLabels and inputdata ----Edit: Found it here -> https://stackoverflow.com/questions/72586425/mudblazor-pie-doughnut-slice-colors – Ricardo Araújo Oct 25 '22 at 21:49
2

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

Cem
  • 176
  • 8