MudChart: Advanced Use Cases

Represents a graphic display of data values in a line, bar, stacked bar, pie, heat map, or donut shape.

Rendered in 0 ms
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 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 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 🗙