Line Chart

API
Basic Usage

020406080100120140160 JanFebMarAprMayJunJulAugSep

Series 1

Series 2

Selected portion of the chart: -1
<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@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

020406080100120140160 JanFebMarAprMayJunJulAugSep

Series 1

Series 2

Selected portion of the chart: -1
<div>
    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@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

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

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

$0.00$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.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();
    }


}
Donut Chart
Pie Chart
An unhandled error has occurred. Reload 🗙