United States
Germany
Sweden
Selected: None
Label Extra Height
Label Rotation
<MudPaper Class="doc-section-component-container"> <MudChart ChartType="ChartType.Bar" ChartSeries="@_series" @bind-SelectedIndex="_index" XAxisLabels="@_xAxisLabels" Width="@_width" Height="@_height" AxisChartOptions="_axisChartOptions"></MudChart> </MudPaper> <MudGrid> <MudItem xs="6"> <MudText Typo="Typo.body1" Class="py-3">Selected: @(_index < 0 ? "None" : _series[_index].Name)</MudText> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox @bind-Value="_axisChartOptions.MatchBoundsToSize" Color="Color.Info" Label="MatchBoundsToSize"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_width" Label="Chart Width"></MudTextField> </MudItem> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_height" Label="Chart Height"></MudTextField> </MudItem> <MudItem md="6" xs="12"> <MudStack> <MudText Typo="Typo.body1">Label Extra Height</MudText> <MudSlider @bind-Value="_axisChartOptions.LabelExtraHeight" Min="0" Max="40" Step="5"></MudSlider> </MudStack> </MudItem> <MudItem md="6" xs="12"> <MudStack> <MudText Typo="Typo.body1">Label Rotation</MudText> <MudSlider @bind-Value="_axisChartOptions.LabelRotation" Min="0" Max="90" Step="15"></MudSlider> </MudStack> </MudItem> </MudGrid>
@code { private int _index = -1; //default value cannot be 0 -> first selectedindex is 0. private string _width = "650px"; private string _height = "350px"; private AxisChartOptions _axisChartOptions = new AxisChartOptions(); private 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 } }, }; private string[] _xAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; }
Custom SVG Content
United States
Germany
Sweden
<MudChart ChartType="ChartType.Bar" ChartSeries="" 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, 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" }; }