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 ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.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.

<LineChart @ref="lineChart" Width="800" Class="mb-4"/>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()"> Add Data </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>

@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 } };
    }

    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.UpdateAsync(chartData, lineChartOptions);
    }

    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 = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor();

        datasetsCount += 1;

        return new LineChartDataset
               {
                   Label = $"Team {datasetsCount}",
                   Data = GetRandomData(),
                   BackgroundColor = new List<string> { c.ToRgbString() },
                   BorderColor = new List<string> { c.ToRgbString() },
                   BorderWidth = new List<double> { 2 },
                   HoverBorderWidth = new List<double> { 4 },
                   PointBackgroundColor = new List<string> { c.ToRgbString() },
                   PointRadius = new List<int> { 0 }, // hide points
                   PointHoverRadius = new List<int> { 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

}

<LineChart @ref="lineChart" Width="800" Class="mb-4"/>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.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 = new List<string> { colors[0] },
                           BorderColor = new List<string> { colors[0] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[0] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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 = new List<string> { colors[1] },
                           BorderColor = new List<string> { colors[1] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[1] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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 = new List<string> { colors[2] },
                           BorderColor = new List<string> { colors[2] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[2] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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!.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y!.Title!.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.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).

<LineChart @ref="lineChart" Width="800" Class="mb-4"/>

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.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 = new List<string> { colors[0] },
                           BorderColor = new List<string> { colors[0] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[0] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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 = new List<string> { colors[1] },
                           BorderColor = new List<string> { colors[1] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[1] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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 = new List<string> { colors[2] },
                           BorderColor = new List<string> { colors[2] },
                           BorderWidth = new List<double> { 2 },
                           HoverBorderWidth = new List<double> { 4 },
                           PointBackgroundColor = new List<string> { colors[2] },
                           PointRadius = new List<int> { 0 }, // hide points
                           PointHoverRadius = new List<int> { 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!.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y!.Title!.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.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#

<LineChart @ref="lineChart" Width="800" Class="mb-4"/>

<Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="Size.Small" @onclick="UpdateIndiaNextOverRunsAsync"> India Next Over </Button>
<Button Color="ButtonColor.Primary" Type="ButtonType.Button" Size="Size.Small" @onclick="UpdateEnglandNextOverRunsAsync"> England Next Over </Button>

@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 = new List<string> { "rgb(88, 80, 141)" },
                               BorderColor = new List<string> { "rgb(88, 80, 141)" },
                               BorderWidth = new List<double> { 2 },
                               HoverBorderWidth = new List<double> { 4 },
                               PointBackgroundColor = new List<string> { "rgb(88, 80, 141)" },
                               PointBorderColor = new List<string> { "rgb(88, 80, 141)" },
                               PointRadius = new List<int> { 0 }, // hide points
                               PointHoverRadius = new List<int> { 4 }
                           },
                           new LineChartDataset
                           {
                               Label = "England",
                               Data = new List<double>(),
                               BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
                               BorderColor = new List<string> { "rgb(255, 166, 0)" },
                               BorderWidth = new List<double> { 2 },
                               HoverBorderWidth = new List<double> { 4 },
                               PointBackgroundColor = new List<string> { "rgb(255, 166, 0)" },
                               PointBorderColor = new List<string> { "rgb(255, 166, 0)" },
                               PointRadius = new List<int> { 0 }, // hide points
                               PointHoverRadius = new List<int> { 4 }
                           }
                       };

        return datasets;
    }

    private LineChartOptions GetLineChartOptions()
    {
        var options = new LineChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "WORM";
        options.Plugins.Title.Display = true;
        options.Plugins.Title!.Font!.Size = 20;

        options.Responsive = true;

        options.Scales.X!.Title!.Text = "Overs";
        options.Scales.X.Title.Display = true;

        options.Scales.Y!.Title!.Text = "Runs";
        options.Scales.Y.Title.Display = true;
        options.Scales.Y.SuggestedMax = 150;

        return options;
    }

}

Data labels#

<LineChart @ref="lineChart" Width="800" Class="mb-4" />

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;

    protected override void OnInitialized()
    {
        var colors = ColorBuilder.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 = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "end", 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 = new List<string> { colors[1] },
                BorderColor = new List<string> { colors[1] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[1] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "end", 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 = new List<string> { colors[2] },
                BorderColor = new List<string> { colors[2] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[2] },
                PointRadius = new List<int> { 3 }, // show points
                PointHoverRadius = new List<int> { 4 },

                // datalabels
                Datalabels = new() { Align = "start", 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!.Text = "2019";
        lineChartOptions.Scales.X.Title.Display = true;

        lineChartOptions.Scales.Y!.Title!.Text = "Visitors";
        lineChartOptions.Scales.Y.Title.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);
    }

}

If you like Blazor Bootstrap, give it a star on GitHub!

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 v2.2.1.

Blazor Line Chart

Prerequisites#

How it works#

Locale#

Add data dynamically for a specific dataset#

Data labels#

Links

Guides

Community