Line Chart - MudBlazor

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.

Fossil

Renewable

Selected: None

MatchBoundsToSize

Chart Height: 350px

Line Width: 3

Fossil as Area

Renewable as Area

XAxis Label Rotation

Show Data Markers

@using MudBlazor.Charts;


<MudPaper Class="doc-section-component-container">
    <MudChart ChartType="ChartType.Line" ChartSeries="@_series" ChartLabels="@_xAxisLabels" ChartOptions="@_options" Width="100%" Height="@($"{_height}px")"
              @bind-SelectedIndex="_index" MatchBoundsToSize="_matchBoundsToSize"/>
</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">
        <MudCheckBox @bind-Value="_matchBoundsToSize" Label="MatchBoundsToSize"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudSlider @bind-Value="_height" Min="150" Max="500">@($"Chart Height: {_height}px")</MudSlider>
    </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)=> _options.SeriesDisplayOverrides[_series[0]].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Fossil as Area"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _options.SeriesDisplayOverrides[_series[1]].LineDisplayType = v ? LineDisplayType.Area : LineDisplayType.Line" Label="Renewable as Area"></MudCheckBox>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudSlider @bind-Value="_options.XAxisLabelRotation" Min="0" Max="90" Step="15">XAxis Label Rotation</MudSlider>
    </MudItem>
    <MudItem md="6" xs="12">
        <MudCheckBox T="bool" ValueChanged="(v)=> _options.ShowDataMarkers = v" Label="Show Data Markers"></MudCheckBox>
    </MudItem>
</MudGrid>

@code {
    private int _index = -1; //default value cannot be 0 -> first selectedindex is 0.
    private LineChartOptions _options = new LineChartOptions()
    {
        XAxisTitle = "Months",
        YAxisTitle = "Sales",
    };

    private int _height = 350;
    private bool _matchBoundsToSize = false;

    private List<ChartSeries<double>> _series = new List<ChartSeries<double>>()
    {
        new ChartSeries<double>() { Name = "Fossil", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } },
        new ChartSeries<double>() { 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" };

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _options.SeriesDisplayOverrides = new Dictionary<IChartSeries, SeriesDisplayOverride>()
        {
            { _series[0], new SeriesDisplayOverride() },
            { _series[1], new SeriesDisplayOverride() }
        };
    }
}

Y-Axis Ticks

Using the ChartOptions you can also change tick interval of the Y-axis by setting parameter YAxisTicks.

Chernobyl-1

Chernobyl-2

Chernobyl-3

Chernobyl-4

Y-Axis Ticks: 50

<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@_series" ChartLabels="@_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<double>> _series = new();
    private readonly LineChartOptions _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<double> { Name = "Chernobyl-1", Data = data1 });
        _series.Add(new ChartSeries<double> { Name = "Chernobyl-2", Data = data2 });
        _series.Add(new ChartSeries<double> { Name = "Chernobyl-3", Data = data3 });
        _series.Add(new ChartSeries<double> { 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.

Series 1

Series 2

Show Data Markers

<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" ChartLabels="@ChartLabels" 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)=> _options.ShowDataMarkers = v" Label="Show Data Markers"></MudCheckBox>
</div>

@code {
    private LineChartOptions _options = new LineChartOptions();
    public List<ChartSeries<double>> Series = new List<ChartSeries<double>>()
    {
        new ChartSeries<double>() { Name = "Series 1", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } },
        new ChartSeries<double>() { Name = "Series 2", Data = new double[] { 35, 41, 35, 51, 49, 62, 69, 91, 148 } },
    };
    public string[] ChartLabels = { "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.Values.Count; i++)
            {
                series.Data[i].Y = random.NextDouble() * 100 + 10;
            }
        }

        StateHasChanged();
    }

    void OnClickMenu(InterpolationOption interpolationOption)
    {
        _options.InterpolationOption = interpolationOption;
        StateHasChanged();
    }
}