FluentUI Charts support

[vaidhykumar]

Is there is a support for fluentui charts ? The React version has limited charts. I would like to see if it can be used in the .NET.

[vnbaaij]

No, we do not (and are not planning to) offer Chart components.

[MBNSoftware]

Hello,

You could try ApexCharts : https://github.com/apexcharts/Blazor-ApexCharts

First tries with it seem good. It can handle a light/dark theme and seems to be easy to customize. At least for settings the colors it's using to those used by Fluent UI :

void OnLuminanceChanged(LuminanceChangedEventArgs e)
{
    options = new ApexChartOptions<MyData>
        {
            Theme = new Theme
            {
                Mode = e.Mode == DesignThemeModes.Dark ? ApexCharts.Mode.Dark : ApexCharts.Mode.Light,
                Palette = e.Mode == DesignThemeModes.Dark ? Enum.GetValues<PaletteType>().ElementAt(new Random().Next(10)) : PaletteType.Palette1
            },
            Xaxis = new XAxis
            {
                Labels = new XAxisLabels
                {
                    Style = new AxisLabelStyle()
                    {
                        Colors = Microsoft.FluentUI.AspNetCore.Components.Color.Accent.ToAttributeValue()?.ToString()
                    }
                }
            }
        };

    options.Yaxis = new List<YAxis>();
    options.Yaxis.Add(new YAxis
        {
            Labels = new YAxisLabels
            {
                Style = new AxisLabelStyle()
                {
                    Colors = Microsoft.FluentUI.AspNetCore.Components.Color.Accent.ToAttributeValue()?.ToString()
                }
            }
        });

    chart.RenderAsync();
}

It's really a first try for me but it looks promising.
Other frameworks (MudBlazor, Radzen, Blazor.Charts) impose styles and void the FluentUI color scheme. This one does not and permits to set its colors.

Hope it can help you.

---

Christophe