Basic Usage
To get a Line Chart use ChartType="ChartType.Line"
to render the configured ChartSeries
as line graphs.
Like in the other chart types, the Series in the chart are clickable. You can bind SelectedIndex
to make your chart interactive.
Using the ChartOptions
you can change the thickness of the lines by setting the parameter LineStrokeWidth
.
Selected: None
XAxis Label Rotation
<MudPaper Class="doc-section-component-container"> <MudChart ChartType="ChartType.Line" ChartSeries="@_series" @bind-SelectedIndex="_index" XAxisLabels="@_xAxisLabels" Width="@_width" Height="@_height" ChartOptions="@_options" AxisChartOptions="_axisChartOptions" /> </MudPaper> <MudGrid> <MudItem md="6" xs="12"> <MudText Typo="Typo.body1" Class="py-3">Selected: @(_index < 0 ? "None" : _series[_index].Name)</MudText> </MudItem> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_width" Label="Chart Width"></MudTextField> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox @bind-Value="_axisChartOptions.MatchBoundsToSize" Label="MatchBoundsToSize"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudTextField @bind-Value="_height" Label="Chart Height"></MudTextField> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox T="bool" ValueChanged="(v)=> _series[0].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Fossil as Area"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudSlider @bind-Value="_options.LineStrokeWidth" Min="1" Max="10">Line Width: @_options.LineStrokeWidth.ToString()</MudSlider> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox T="bool" ValueChanged="(v)=> _series[1].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Renewable as Area"></MudCheckBox> </MudItem> <MudItem md="6" xs="12"> <MudStack> <MudText Typo="Typo.body1">XAxis Label Rotation</MudText> <MudSlider @bind-Value="_axisChartOptions.XAxisLabelRotation" Min="0" Max="90" Step="15"></MudSlider> </MudStack> </MudItem> <MudItem md="6" xs="12"> <MudCheckBox T="bool" ValueChanged="(v)=> _series.ForEach(x => x.ShowDataMarkers = v)" Label="Show Data Markers"></MudCheckBox> </MudItem> </MudGrid>
@code { private int _index = -1; //default value cannot be 0 -> first selectedindex is 0. private ChartOptions _options = new ChartOptions(); private AxisChartOptions _axisChartOptions = new AxisChartOptions(); private string _width = "650px"; private string _height = "350px"; private List<ChartSeries> _series = new List<ChartSeries>() { new ChartSeries() { Name = "Fossil", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } }, new ChartSeries() { Name = "Renewable", Data = new double[] { 10, 41, 35, 51, 49, 62, 69, 91, 148 } }, }; private string[] _xAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; }
Y-Axis Ticks
Using the ChartOptions
you can also change tick interval of the Y-axis by setting parameter YAxisTicks
.
<div> <MudChart ChartType="ChartType.Line" ChartSeries="@_series" XAxisLabels="@_xAxisLabels" ChartOptions="@_options" Width="100%" Height="350px"></MudChart> <MudSlider @bind-Value="_options.YAxisTicks" Min="10" Max="400" Step="10" Color="Color.Info">Y-Axis Ticks: @_options.YAxisTicks.ToString()</MudSlider> </div>
@code { private readonly List<ChartSeries> _series = new(); private readonly ChartOptions _options = new(); private readonly string[] _xAxisLabels = { "1986-04-20", "1986-04-21", "1986-04-22", "1986-04-23", "1986-04-24", "1986-04-25", "1986-04-26" }; protected override void OnInitialized() { double[] data1 = { 65, 68, 70, 74, 74, 72, 74 }; double[] data2 = { 88, 90, 91, 92, 91, 90, 90 }; double[] data3 = { 89, 91, 92, 92, 92, 92, 91 }; double[] data4 = { 85, 86, 90, 90, 92, 99, 0 }; _series.Add(new ChartSeries { Name = "Chernobyl-1", Data = data1 }); _series.Add(new ChartSeries { Name = "Chernobyl-2", Data = data2 }); _series.Add(new ChartSeries { Name = "Chernobyl-3", Data = data3 }); _series.Add(new ChartSeries { Name = "Chernobyl-4", Data = data4 }); _options.YAxisTicks = 50; StateHasChanged(); } }
Interpolation
The ChartOptions
parameter InterpolationOption
lets you control the smoothness of
the lines via different interpolation algorithms.
<div> <MudChart ChartType="ChartType.Line" ChartSeries="" XAxisLabels="" Width="100%" Height="350" ChartOptions="options"></MudChart> <MudButton @onclick="RandomizeData">Randomize Data</MudButton> <MudMenu Label="Interpolation Algorithm" FullWidth="true"> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.Straight)">Straight</MudMenuItem> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.NaturalSpline)">Natural Spline</MudMenuItem> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.EndSlope)">End Slope</MudMenuItem> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.Periodic)">Periodic</MudMenuItem> </MudMenu> <MudCheckBox T="bool" ValueChanged="(v)=> Series.ForEach(x => x.ShowDataMarkers = v)" Label="Show Data Markers"></MudCheckBox> </div>
@code { private ChartOptions options = new ChartOptions(); public List<ChartSeries> Series = new List<ChartSeries>() { new ChartSeries() { Name = "Series 1", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } }, new ChartSeries() { Name = "Series 2", Data = new double[] { 35, 41, 35, 51, 49, 62, 69, 91, 148 } }, }; public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; Random random = new Random(); protected override void OnInitialized() { options.InterpolationOption = InterpolationOption.NaturalSpline; options.YAxisFormat = "c2"; } public void RandomizeData() { foreach (var series in Series) { for (int i = 0; i < series.Data.Length - 1; i++) { series.Data[i] = random.NextDouble() * 100 + 10; } } StateHasChanged(); } void OnClickMenu(InterpolationOption interpolationOption) { options.InterpolationOption = interpolationOption; StateHasChanged(); } }
Hide Chart Series
If you set the parameter CanHideSeries
then the legend will show check boxes
that allow the user to toggle the visibility of certain chart series.
<div> <MudChart ChartType="ChartType.Line" ChartSeries="" XAxisLabels="" Width="100%" Height="350px" CanHideSeries/> <MudButton Variant="Variant.Filled" @onclick="RandomizeData">Randomize Data</MudButton> </div>
@code { protected override void OnInitialized() { base.OnInitialized(); RandomizeData(); } public List<ChartSeries> Series = new List<ChartSeries>(); public string[] XAxisLabels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; Random random = new Random(); public void RandomizeData() { var newSeries = new List<ChartSeries>(); for (int s = 1; s <= 10; s++) { var series = new ChartSeries() { Name = $"Series {s}", Data = new double[9] }; for (int i = 0; i < 9; i++) series.Data[i] = random.NextDouble() * 100; newSeries.Add(series); } Series = newSeries; StateHasChanged(); } }