Stacked Bar Chart

020406080100120 JanFebMarAprMayJunJulAugSep

United States

Germany

Sweden

Selected portion of the chart: -1
<div>
    <MudChart ChartType="ChartType.StackedBar" ChartSeries="@Series" @bind-SelectedIndex="Index" LegendPosition="@LegendPosition" XAxisLabels="@XAxisLabels" Width="100%" Height="350px"></MudChart>
</div>
<MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText>

<div>
    <MudRadioGroup @bind-SelectedOption="@LegendPosition">
        <MudRadio Option="@(Position.Bottom)" Color="Color.Primary">Bottom</MudRadio>
        <MudRadio Option="@(Position.Top)" Color="Color.Primary">Top</MudRadio>
        <MudRadio Option="@(Position.Left)" Color="Color.Primary">Left</MudRadio>
        <MudRadio Option="@(Position.Right)" Color="Color.Primary">Right</MudRadio>
        <MudRadio Option="@(Position.Start)" Color="Color.Primary">Start</MudRadio>
        <MudRadio Option="@(Position.End)" Color="Color.Primary">End</MudRadio>
    </MudRadioGroup>
</div>
@code {
    private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.

    private Position LegendPosition = Position.Bottom;

    public List<ChartSeries> Series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "United States", Data = new double[] { 40, 20, 25, 27, 46, 60, 48, 80, 15 } },
        new ChartSeries() { Name = "Germany", Data = new double[] { 19, 24, 35, 13, 28, 15, 13, 16, 31 } },
        new ChartSeries() { Name = "Sweden", Data = new double[] { 8, 6, 11, 13, 4, 16, 10, 16, 18 } },
    };
    public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
}
Custom SVG Content

020406080 JanFebMarAprMayJunJulAugSep I Love MudBlazor!

United States

Germany

Sweden

<MudChart ChartType="ChartType.StackedBar" ChartSeries="@Series" XAxisLabels="@XAxisLabels" Width="100%" Height="350px">
	<CustomGraphics>
		<style>
			.heavy { font: bold 30px Helvetica; }
			.Rrrrr { font: italic 40px Helvetica; fill: rgb(62,44,221); }
		</style>
		<text x="80" y="35" class="heavy">I Love</text>
		<text x="105" y="70" class="Rrrrr">MudBlazor!</text>
	</CustomGraphics>
</MudChart>
@code {
    public List<ChartSeries> Series = new List<ChartSeries>()
    {
        new ChartSeries() { Name = "United States", Data = new double[] { 40, 20, 25, 27, 46, 46, 48, 44, 15 } },
        new ChartSeries() { Name = "Germany", Data = new double[] { 19, 24, 35, 13, 28, 15, 13, 16, 40 } },
        new ChartSeries() { Name = "Sweden", Data = new double[] { 8, 6, 11, 13, 4, 16, 10, 16, 20 } },
    };
    public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.1

An unhandled error has occurred. Reload 🗙