MudBlazor - Blazor Component Library

API

Basic Rose Chart

Rose charts display data as sectors of varying radii on a circular chart. The example below shows a basic Rose chart with a single data series. It also demonstrates selection, where clicking on a sector displays its value.

Selected Index: -1

<MudPaper Class="doc-section-component-container">
    <MudChart ChartType="ChartType.Rose" ChartSeries="@_series" @bind-SelectedIndex="_selectedIndex" ChartOptions="@_options" Width="100%" Height="300px">
        <CustomGraphics>
            <text x="50"
                  y="25"
                  dominant-baseline="middle"
                  text-anchor="middle"
                  fill="@_options.ChartPalette[Math.Max(0, _selectedIndex)]">@(_selectedIndex == -1 ? "" : $"Selected: {_series[0].Data[_selectedIndex].Y}")</text>
        </CustomGraphics>
    </MudChart>
</MudPaper>

<div>Selected Index: @_selectedIndex</div>

@code {
    private int _selectedIndex = -1;
    private List<ChartSeries<double>> _series = new() { new() { Name = "Single Series", Data = new double[] { 70, 20, 40, 50, 80 } } };
    private RoseChartOptions _options = new RoseChartOptions
    {
        ShowValues = true,
        AngleOffset = 45,
        ScaleFactor = 0.8,
        ShowToolTips = false,
    };
}

Customized Rose Chart

This example demonstrates further customization options for the Rose chart:

AngleOffset: Rotates the starting point of the chart.
ScaleFactor: Adjusts the maximum radius of the sectors relative to the chart area.
ShowAsPercentage: Displays values as percentages of the total.
AggregationOption: Defines how data is aggregated when multiple series are provided (though Rose charts are typically single-series, this shows potential aggregation behavior).
ShowValues: Displays values for each sector.

Sales Q1

Sales Q2

<MudPaper Class="doc-section-component-container mx-8">
    <MudChart ChartType="ChartType.Rose" ChartSeries="@_series" ChartOptions="@_options" Width="100%" Height="400px" ChartLabels="@_labels" />
</MudPaper>

@code {
    private List<ChartSeries<double>> _series = new List<ChartSeries<double>>()
    {
        new ChartSeries<double>() { Name = "Sales Q1", Data = new double[] { 10, 40, 20, 30 } },
        new ChartSeries<double>() { Name = "Sales Q2", Data = new double[] { 15, 35, 25, 35 } }
    };
    private string[] _labels = { "Product A", "Product B", "Product C", "Product D" };
    private RoseChartOptions _options = new RoseChartOptions
    {
        AngleOffset = 90,
        ScaleFactor = 1.0,
        ShowAsPercentage = true,
        AggregationOption = Charts.AggregationOption.GroupByDataSet
    };
}