MudChart: Advanced Use Cases

Charts plot numeric data as line, bar, stacked bar, pie, donut, radar, rose, heat map, time series, scatter, or Sankey graphics. Choose the graphic with the
ChartType
parameter.

API
Dynamic Chart Type

Display the same dataset in multiple chart formats by simply switching the ChartType. 

<MudPaper Class="doc-section-component-container mx-8">
    <MudToolBar>
        <MudMenu Modal="false" Variant="Variant.Outlined" EndIcon="@_menuIcons[_chartType]" IconColor="Color.Primary" Label="Chart Type">
            <MudMenuItem Icon="@_menuIcons[ChartType.Bar]" Label="Bar" OnClick="() => _chartType = ChartType.Bar" Disabled="@(_chartType == ChartType.Bar)"/>
            <MudMenuItem Icon="@_menuIcons[ChartType.StackedBar]" Label="Stacked Bar" OnClick="() => _chartType = ChartType.StackedBar" Disabled="@(_chartType == ChartType.StackedBar)" />
            <MudMenuItem Icon="@_menuIcons[ChartType.Line]" Label="Line" OnClick="() => _chartType = ChartType.Line" Disabled="@(_chartType == ChartType.Line)" />
            <MudMenuItem Icon="@_menuIcons[ChartType.Pie]" Label="Pie" OnClick="() => _chartType = ChartType.Pie" Disabled="@(_chartType == ChartType.Pie)" />
            <MudMenuItem Icon="@_menuIcons[ChartType.Donut]" Label="Donut" OnClick="() => _chartType = ChartType.Donut" Disabled="@(_chartType == ChartType.Donut)" />
            <MudMenuItem Icon="@_menuIcons[ChartType.Rose]" Label="Rose" OnClick="() => _chartType = ChartType.Rose" Disabled="@(_chartType == ChartType.Rose)"/>
            <MudMenuItem Icon="@_menuIcons[ChartType.Radar]" Label="Radar" OnClick="() => _chartType = ChartType.Radar" Disabled="@(_chartType == ChartType.Radar)"  />
        </MudMenu>
    </MudToolBar>

    <MudChart T="double" ChartType="_chartType"
              ChartSeries="_dataSet"
              ChartLabels="@_labels"
              Width="100%" Height="400px" CanHideSeries MatchBoundsToSize />
</MudPaper>

@code {
    private Dictionary<ChartType, string> _menuIcons = new()
    {
        { ChartType.Bar, Icons.Material.Filled.BarChart },
        { ChartType.StackedBar, Icons.Material.Filled.StackedBarChart },
        { ChartType.Line, Icons.Material.Filled.ShowChart },
        { ChartType.Pie, Icons.Material.Filled.PieChart },
        { ChartType.Donut, Icons.Material.Filled.DonutLarge },
        { ChartType.Rose, Icons.Material.Filled.DonutSmall },
        { ChartType.Radar, Icons.Material.Filled.Hub },
    };

    private ChartType _chartType = ChartType.Bar;
    private string[] _labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    private List<ChartSeries<double>> _dataSet =>
    [
            new() { Name = "United Kingdom", Data = new([60, 54, 23, 42, 67, 31]) },
            new() { Name = "United States",  Data = new([40, 12, 32, 58, 43, 65]) },
            new() { Name = "Greenland",      Data = new([47, 30, 43, 25, 59, 63]) },
            new() { Name = "Norway",         Data = new([14, 27, 65, 43, 21, 58]) },
    ];
}
Mixed Chart (Combo Chart)

Charts inheriting from MudAxisChartBase can be combined to create complex visualizations. You can overlay different chart types, such as Bar and Line charts, to display multiple datasets in a single chart. 

@using MudBlazor.Charts

<MudPaper Class="doc-section-component-container">
    <MudChart T="double" ChartType="ChartType.StackedBar" ChartSeries="@StackedDataSet" ChartOptions="@_barChartOptions" MatchBoundsToSize="true" Width="100%" Height="500px">
        <Line ChartSeries="@LineDataSet" ChartOptions="@_lineChartOptions" />
    </MudChart>
</MudPaper>

@code {
    private List<ChartSeries<double>> StackedDataSet =>
    [
        new() { Name = "New", Data = new([400, 380, 350, 300, 320, 380, 390, 400, 420, 450, 400, 500, 1200, 450, 480, 400, 420, 450, 460, 480, 500, 580, 600, 650, 700, 600, 450, 500, 550, 580, 600, 620, 550]) },
        new() { Name = "Upgrade", Data = new([300, 250, 200, 150, 180, 120, 130, 150, 180, 200, 220, 250, 200, 150, 180, 200, 220, 150, 180, 200, 220, 250, 280, 300, 250, 200, 230, 250, 280, 220, 250, 200, 280]) },
        new() { Name = "Churn", Data = new([-1, -60, -60, -40, -70, -100, -80, -120, -130, -140, -150, -150, -200, -600, -150, -180, -190, -200, -210, -220, -230, -300, -320, -350, -380, -400, -500, -450, -420, -400, -450, -480, -500]) },
        new() { Name = "Downgrade", Data = new([-1, -20, -30, -20, -40, -50, -60, -70, -70, -80, -90, -150, -200, -100, -80, -100, -110, -120, -130, -140, -150, -180, -150, -180, -200, -220, -250, -180, -150, -130, -150, -160, -180]) },
    ];

    private StackedBarChartOptions _barChartOptions = new StackedBarChartOptions()
    {
        ChartPalette = ["#4A89C2", "#80B5E2", "#E17C45", "#F4B183"],
        BarWidthRatio = .95,
        YAxisTicks = 400,
        YAxisSuggestedMax = 1600,
    };

    private List<ChartSeries<double>> LineDataSet =>
    [
        new() { Name = "Overall Change", Data = new([ 650, 550, 450, 380, 300, 320, 350, 400, 380, 420, 350, 650, 880, -300, 400, 250, 300, 320, 280, 350, 300, 400, 380, 420, 750, 600, 200, 300, 400, 380, 350, 400, 200 ]) }
    ];

    private LineChartOptions _lineChartOptions = new LineChartOptions()
    {
        ChartPalette = ["#512DA8"],
        ShowDataMarkers = true,
        LineStrokeWidth = 1.8,
    };
}
An unhandled error has occurred. Reload 🗙