Blazor Line Chart

A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.

Prerequisites #

Refer to the getting started guide for setting up charts.

How it works #

In the following example, a categorical 12-color palette is used.
TIP
For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. 
<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await AddDataAsync()"> Add Data </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount;
    private int labelsCount;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        lineChartOptions = new()
            {
                IndexAxis = "x",
                Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
                Responsive = true,
            };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is LineChartDataset lineChartDataset
                && lineChartDataset is not null
                && lineChartDataset.Data is not null)
            {
                var count = lineChartDataset.Data.Count;

                var newData = new List<double?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                lineChartDataset.Data = newData;
                newDatasets.Add(lineChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await lineChart.UpdateValuesAsync(chartData);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomLineChartDataset();
        chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is LineChartDataset lineChartDataset)
                data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200)));
        }

        chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalLineChartAsync()
    {
        lineChartOptions.IndexAxis = "y";
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    private async Task ShowVerticalLineChartAsync()
    {
        lineChartOptions.IndexAxis = "x";
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomLineChartDataset());
        }

        return datasets;
    }

    private LineChartDataset GetRandomLineChartDataset()
    {
        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToRgbaString(),
                BorderColor = c.ToRgbString(),
                PointRadius = new List<double> { 5 },
                PointHoverRadius = new List<double> { 8 },
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return $"Day {labelsCount}";
    }

    #endregion Data Preparation

}
<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset
            {
                Label = "Windows",
                Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = colors[0],
                BorderColor = colors[0],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[0],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset
            {
                Label = "macOS",
                Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = colors[1],
                BorderColor = colors[1],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[1],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset
            {
                Label = "Other",
                Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = colors[2],
                BorderColor = colors[2],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[2],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset3);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        lineChartOptions = new();
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
        lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

        lineChartOptions.Plugins.Title!.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

}

Locale #

By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). 
<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset
            {
                Label = "Windows",
                Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = colors[0],
                BorderColor = colors[0],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[0],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset
            {
                Label = "macOS",
                Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = colors[1],
                BorderColor = colors[1],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[1],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset
            {
                Label = "Other",
                Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = colors[2],
                BorderColor = colors[2],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[2],
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
        datasets.Add(dataset3);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        lineChartOptions = new();
        lineChartOptions.Locale = "de-DE";
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
        lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

        lineChartOptions.Plugins.Title!.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

}

Add data dynamically for a specific dataset #

<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="ButtonSize.Small" @onclick="UpdateIndiaNextOverRunsAsync"> India Next Over </Button>
    <Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="ButtonSize.Small" @onclick="UpdateEnglandNextOverRunsAsync"> England Next Over </Button>
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;
    private List<string> labels = default!;

    private List<double> indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 };
    private List<double> englandRunsArray = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 };

    private int indiaCurrentOver;
    private int englandCurrentOver;

    protected override void OnInitialized()
    {
        labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" };
        lineChartOptions = GetLineChartOptions();
        chartData = new ChartData { Labels = labels, Datasets = GetDefaultDatasets() };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await lineChart.InitializeAsync(chartData, lineChartOptions);
    }

    private async Task UpdateIndiaNextOverRunsAsync()
    {
        if (indiaCurrentOver > 0 && indiaCurrentOver > indiaRunsArray.Count - 1)
            return;

        chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", new LineChartDatasetData("India", indiaRunsArray[indiaCurrentOver]));
        indiaCurrentOver++;
    }

    private async Task UpdateEnglandNextOverRunsAsync()
    {
        if (englandCurrentOver > 0 && englandCurrentOver > englandRunsArray.Count - 1)
            return;

        chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", new LineChartDatasetData("England", englandRunsArray[englandCurrentOver]));
        englandCurrentOver++;
    }

    private List<IChartDataset> GetDefaultDatasets()
    {
        var datasets = new List<IChartDataset>
                       {
                           new LineChartDataset
                           {
                               Label = "India",
                               Data = new List<double?>(),
                               BackgroundColor = "rgb(88, 80, 141)",
                               BorderColor = "rgb(88, 80, 141)",
                               BorderWidth = 2,
                               HoverBorderWidth = 4,
                               // PointBackgroundColor = "rgb(88, 80, 141)",
                               // PointBorderColor = "rgb(88, 80, 141)",
                               // PointRadius = 0, // hide points
                               // PointHoverRadius = 4,
                           },
                           new LineChartDataset
                           {
                               Label = "England",
                               Data = new List<double?>(),
                               BackgroundColor = "rgb(255, 166, 0)",
                               BorderColor = "rgb(255, 166, 0)",
                               BorderWidth = 2,
                               HoverBorderWidth = 4,
                               // PointBackgroundColor = "rgb(255, 166, 0)",
                               // PointBorderColor = "rgb(255, 166, 0)",
                               // PointRadius = 0, // hide points
                               // PointHoverRadius = 4,
                           }
                       };

        return datasets;
    }

    private LineChartOptions GetLineChartOptions()
    {
        var options = new LineChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title = new ChartPluginsTitle { Text = "WORM", Display = true, Font = new ChartFont { Size = 20 } };

        options.Responsive = true;

        options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
        options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };
        options.Scales.Y.SuggestedMax = 150;

        return options;
    }

}

Data labels #

<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorUtility.CategoricalTwelveColors;

        var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset
            {
                Label = "Windows",
                Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
                BackgroundColor = colors[0],
                BorderColor = colors[0],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[0],
                // PointRadius = 3, // show points
                // PointHoverRadius = 4,

                // datalabels
                Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
            };
        datasets.Add(dataset1);

        var dataset2 = new LineChartDataset
            {
                Label = "macOS",
                Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
                BackgroundColor = colors[1],
                BorderColor = colors[1],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[1],
                // PointRadius = 3, // show points
                // PointHoverRadius = 4,

                // datalabels
                Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
            };
        datasets.Add(dataset2);

        var dataset3 = new LineChartDataset
            {
                Label = "Other",
                Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
                BackgroundColor = colors[2],
                BorderColor = colors[2],
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = colors[2],
                // PointRadius = 3, // show points
                // PointHoverRadius = 4,

                // datalabels
                Datalabels = new() { Alignment = Alignment.Start, Anchor = Anchor.Start }
            };
        datasets.Add(dataset3);

        chartData = new ChartData
            {
                Labels = labels,
                Datasets = datasets
            };

        lineChartOptions = new();
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
        lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

        lineChartOptions.Plugins.Title!.Text = "Operating system";
        lineChartOptions.Plugins.Title.Display = true;

        // datalabels
        lineChartOptions.Plugins.Datalabels.Color = "white";
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // pass the plugin name to enable the data labels
            await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" });
        }
        await base.OnAfterRenderAsync(firstRender);
    }

}

Tick Configuration #

<div class="container-fluid overflow-x-auto">
    <LineChart @ref="lineChart" Width="800" />
</div>

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" Class="my-1 mr-1" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </Button>
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount;
    private int labelsCount;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };

        // set ticks color
        lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" };
        lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task ChangeTicksAlignmentToStart()
    {
        lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Start;
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    private async Task ChangeTicksAlignmentToCenter()
    {
        lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Center;
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    private async Task ChangeTicksAlignmentToEnd()
    {
        lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.End;
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomLineChartDataset());
        }

        return datasets;
    }

    private LineChartDataset GetRandomLineChartDataset()
    {
        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToRgbString(),
                BorderColor = c.ToRgbString(),
                BorderWidth = 2,
                HoverBorderWidth = 4,
                // PointBackgroundColor = c.ToRgbString(),
                // PointRadius = 0, // hide points
                // PointHoverRadius = 4,
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return $"Day {labelsCount}";
    }

    #endregion Data Preparation

}

Fill between datasets #

<LineChart Height="200" @ref="lineChart" Width="500" />

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await NoFillAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> No fill</Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToNextAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to next (relative index +1)</Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToZeroAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to specific (absolute index 0) </Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToReferenceAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to specific (by object reference)</Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToStartAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to start </Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToEndAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to end</Button>
    <Button Color="ButtonColor.Primary" Class="my-1 mr-1" @onclick="async () => await FillToValueAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> Fill to value 50</Button>
</div>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount;
    private int labelsCount;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(4) };
        lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    public async Task NoFillAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.Fill = null;
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToNextAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.FillToDataset(1, true);
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToZeroAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.FillToDataset(0, false);
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToReferenceAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        var fillTo = chartData.Datasets[3] as LineChartDataset;

        middle!.FillToDataset(chartData, fillTo!);
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToStartAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.FillToStart();
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToEndAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.FillToEnd();
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    public async Task FillToValueAsync()
    {
        var middle = chartData.Datasets[1] as LineChartDataset;
        middle!.FillToValue(50.0);
        await lineChart.UpdateAsync(chartData, lineChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomLineChartDataset());
        }

        return datasets;
    }

    private LineChartDataset GetRandomLineChartDataset()
    {
        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToRgbaString(),
                BorderCapStyle = "round",
                BorderColor = c.ToRgbString(),
                BorderWidth = 2,
                HoverBorderWidth = 4,
                PointBackgroundColor = new List<string>() { c.ToRgbString() },
                // PointRadius = 0, // hide points
                PointHoverRadius = new List<double>() { 4 },
            };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return $"Day {labelsCount}";
    }

    #endregion Data Preparation
}

Using charts only

If you only need chart components (without the rest of the Blazor Bootstrap UI), install the BlazorExpress.ChartJS package from NuGet.

> dotnet add package BlazorExpress.ChartJS

For setup and usage details, see the BlazorExpress.ChartJS getting started guide.

If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.5.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Blazor Express

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.