Line Chart

API
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.

020406080100120140160 JanFebMarAprMayJunJulAugSep

Fossil

Renewable

Selected: None

Line Width: 3

<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@Options"/>
    <MudGrid>
        <MudItem xs="6">
            <MudText Typo="Typo.body1" Class="py-3">Selected: @(Index < 0 ? "None" : Series[Index].Name)</MudText>
        </MudItem>
        <MudItem xs="6">
            <MudSlider @bind-Value="Options.LineStrokeWidth" Min="1" Max="10" Color="Color.Info">Line Width: @Options.LineStrokeWidth.ToString()</MudSlider>
        </MudItem>
    </MudGrid>
</div>
@code {
    private int Index = -1; //default value cannot be 0 -> first selectedindex is 0.
    public ChartOptions Options = new ChartOptions();
    
    public 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 } },
    };
    public 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.

050100 1986-04-201986-04-211986-04-221986-04-231986-04-241986-04-251986-04-26

Chernobyl-1

Chernobyl-2

Chernobyl-3

Chernobyl-4

Y-Axis Ticks: 50

<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 smootheness of the lines via different interpolation algorithms.

$20.00$40.00$60.00$80.00$100.00$120.00$140.00$160.00 JanFebMarAprMayJunJulAugSep

Series 1

Series 2

<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" XAxisLabels="@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>
</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();
    }


}
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.

020406080100 JanFebMarAprMayJunJulAugSep

Series 1

Series 2

Series 3

Series 4

Series 5

Series 6

Series 7

Series 8

Series 9

Series 10

<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" XAxisLabels="@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();
    }
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙