Basic Usage
Series 1
Series 2
Selected portion of the chart: -1
<div> <MudChart ChartType="ChartType.Line" ChartSeries="" @bind-SelectedIndex="Index" XAxisLabels="" Width="100%" Height="350px"></MudChart> <MudButton @onclick="RandomizeData">Randomize Data</MudButton> <MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText> </div>
@code { private int Index = -1; //default value cannot be 0 -> first selectedindex is 0. 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[] { 10, 41, 35, 51, 49, 62, 69, 91, 148 } }, }; public string[] XAxisLabels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; Random random = new Random(); public void RandomizeData() { var new_series = new List<ChartSeries>() { new ChartSeries() { Name = "Series 1", Data = new double[9] }, new ChartSeries() { Name = "Series 2", Data = new double[9] }, }; for (int i = 0; i < 9; i++) { new_series[0].Data[i] = random.NextDouble() * 100; new_series[1].Data[i] = random.NextDouble() * 100; } Series = new_series; StateHasChanged(); } }
Line Widths
Series 1
Series 2
Selected portion of the chart: -1
<div> <MudChart ChartType="ChartType.Line" ChartSeries="" @bind-SelectedIndex="Index" XAxisLabels="" Width="100%" Height="350px" ChartOptions="chartOptions"></MudChart> <MudButton @onclick="RandomizeData">Randomize Data</MudButton> <MudButton @onclick="RandomizeLineWidths">Randomize Line Widths</MudButton> <MudText Typo="Typo.h6">Selected portion of the chart: @Index</MudText> </div>
@code { private int Index = -1; //default value cannot be 0 -> first selectedindex is 0. public ChartOptions chartOptions = 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[] { 10, 41, 35, 51, 49, 62, 69, 91, 148 } }, }; public string[] XAxisLabels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" }; Random random = new Random(); public void RandomizeData() { var new_series = new List<ChartSeries>() { new ChartSeries() { Name = "Series 1", Data = new double[9] }, new ChartSeries() { Name = "Series 2", Data = new double[9] }, }; for (int i = 0; i < 9; i++) { new_series[0].Data[i] = random.NextDouble() * 100; new_series[1].Data[i] = random.NextDouble() * 100; } Series = new_series; StateHasChanged(); } public void RandomizeLineWidths() { chartOptions.LineStrokeWidth = random.NextInt64(1, 10); StateHasChanged(); } }
Y Axis ticks
Chernobyl-1
Chernobyl-2
Chernobyl-3
Chernobyl-4
<MudChart ChartType="ChartType.Line" ChartSeries="@_series" XAxisLabels="@_xAxisLabels" ChartOptions="@_options" Width="100%" Height="350px"></MudChart>
@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 = 400; StateHasChanged(); } }
Interpolation
Series 1
Series 2
<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.NaturalSpline)">Natural Spline</MudMenuItem> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.EndSlope)">End Slope</MudMenuItem> <MudMenuItem OnClick="() => OnClickMenu(InterpolationOption.Periodic)">Periodic</MudMenuItem> </MudMenu> </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() { var new_series = new List<ChartSeries>() { new ChartSeries() { Name = "Series 1", Data = new double[9] }, new ChartSeries() { Name = "Series 2", Data = new double[9] }, }; for (int i = 0; i < 9; i++) { new_series[0].Data[i] = random.NextDouble() * 100; new_series[1].Data[i] = random.NextDouble() * 100; } Series = new_series; StateHasChanged(); } void OnClickMenu(InterpolationOption interpolationOption) { options.InterpolationOption = interpolationOption; StateHasChanged(); } }