Line Chart

Explore interactive Blazor Line Chart examples with source code. Learn how to visualize time-series data, customize chart appearance, and enhance your Blazor applications. Try live demos and discover practical usage scenarios for the Line Chart component.

API Documentation

Chart setup #

Before using any chart demo: install BlazorExpress.ChartJS 1.2.2, load Chart.js 4.4.1, chartjs-plugin-datalabels 2.2.0, and _content/BlazorExpress.ChartJS/blazorexpress.chartjs.js, then add @using BlazorExpress.ChartJS to your chart page or chart folder.

Follow the shared chart setup guide, the .NET 8 WebAssembly guide, or the .NET 8 Web App Server guide. For full chart component guidance and examples, visit chartjs.blazorexpress.com.

How it works #

The Line Chart component visualizes data trends using connected data points, making it ideal for tracking changes over time or comparing multiple series.

How to use:
  1. Define your chart data by specifying Labels for the X-axis and one or more Datasets for the Y-axis values.
  2. Customize the chart appearance and behavior using the Options property (e.g., colors, line styles, tooltips, axis settings).
  3. Add the LineChart component to your page and bind your data and options.
  4. Refer to the demo code below for examples of basic usage, advanced customization, and dynamic updates.
These demos demonstrate how to set up a line chart, configure its appearance, and update the data or options to fit your application's needs. 
<LineChart @ref="lineChart" Width="600" />

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync"> Add Data </Button>
    <Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalLineChartAsync"> Horizontal Line Chart </Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="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.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 = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[datasetsCount]);

        datasetsCount += 1;

        return new LineChartDataset
        {
            Label = $"Team {datasetsCount}",
            Data = GetRandomData(),
            BackgroundColor = ChartJsColorExtensions.ToRgbaString(c),
            BorderColor = ChartJsColorExtensions.ToRgbString(c),
            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
}

You can further enhance your charts by updating datasets, changing styles, or handling chart events. Review the demo code for practical scenarios and copy the relevant parts into your own project to get started quickly. 

<LineChart @ref="lineChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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);
    }
}

Combo bar/line #

The Combo bar/line demo mixes LineChartDataset and BarChartDataset in the same LineChart.

How to use:
  1. Use the LineChart component as the root chart.
  2. Add both LineChartDataset and BarChartDataset instances to the same ChartData.Datasets collection.
  3. Configure interaction options such as Mode = InteractionMode.Index and Intersect = false so bar and line points share tooltips cleanly.
  4. Refer to the demo code below for a working example with a line series and bar columns in the same chart area.
<LineChart @ref="lineChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var forecastColor = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[2]);
        var actualColor = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[3]);

        chartData = new ChartData
        {
            Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
            Datasets = new List<IChartDataset>
            {
                new LineChartDataset
                {
                    Label = "Forecast",
                    Data = new List<double?> { 45, 52, 61, 66, 73, 79 },
                    BackgroundColor = ChartJsColorExtensions.ToRgbaString(forecastColor),
                    BorderColor = ChartJsColorExtensions.ToRgbString(forecastColor),
                    PointRadius = new List<double> { 4 },
                    PointHoverRadius = new List<double> { 6 },
                },
                new BarChartDataset
                {
                    Label = "Actual",
                    Data = new List<double?> { 41, 49, 58, 70, 75, 82 },
                    BackgroundColor = new List<string> { ChartJsColorExtensions.ToRgbaString(actualColor) },
                    BorderColor = new List<string> { ChartJsColorExtensions.ToRgbString(actualColor) },
                    BorderWidth = new List<double> { 0 },
                },
            },
        };

        lineChartOptions = new LineChartOptions
        {
            Responsive = true,
            Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
        };
    }

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

        await base.OnAfterRenderAsync(firstRender);
    }
}

Data labels #

The Line Chart component supports data labels, allowing you to display values directly on each data point in the chart.

How to use:
  1. Enable data labels by setting Options.Plugins.Datalabels.Display = true in your chart options.
  2. Customize the label content, formatting, and position using the available plugin settings.
  3. Bind your data and labels to the chart as usual.
  4. Refer to the demo code below for a working example and further configuration options.
Data labels make it easier for users to interpret the chart by showing the exact value of each point directly on the line. 
<LineChart @ref="lineChart" Width="800" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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 = DataLabelAlignment.End, Anchor = DataLabelAnchor.End, BackgroundColor = colors[0] }
            };
        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 = DataLabelAlignment.End, Anchor = DataLabelAnchor.End, BackgroundColor = colors[1] }
            };
        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 = DataLabelAlignment.Start, Anchor = DataLabelAnchor.Start, BackgroundColor = colors[2] }
            };
        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 #

The Tick Configuration demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.

How to use:
  1. Use the Options.Scales.X.Ticks and Options.Scales.Y.Ticks properties to control tick display, such as step size, min/max values, and formatting.
  2. You can format tick labels, hide or show specific ticks, and adjust their appearance to improve chart readability.
  3. Apply custom logic for tick callbacks to display values in a specific format (e.g., currency, percentage).
  4. Refer to the demo code below for practical examples of configuring axis ticks for your data visualization needs.
Customizing tick configuration helps ensure your chart is clear and tailored to your application's requirements. 
<LineChart @ref="lineChart" Width="600" />

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToStart"> Alignment: start </Button>
    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ChangeTicksAlignmentToCenter"> Alignment: center (default) </Button>
    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="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 = ChartJsColorUtility.CategoricalTwelveColors[0] };
        lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ChartJsColorUtility.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 = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[datasetsCount]);

        datasetsCount += 1;

        return new LineChartDataset
        {
            Label = $"Team {datasetsCount}",
            Data = GetRandomData(),
            BackgroundColor = ChartJsColorExtensions.ToRgbString(c),
            BorderColor = ChartJsColorExtensions.ToRgbString(c),
            BorderWidth = 2,
            HoverBorderWidth = 4,
            // PointBackgroundColor = ChartJsColorExtensions.ToRgbString(c),
            // 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
}

Locale #

The Locale demo illustrates how to localize number and date formatting in the Line Chart component to match your users' regional preferences.

How to use:
  1. Set the Locale property on the LineChart component to your desired culture code (e.g., "de-DE" for German).
  2. All number and date labels in the chart will automatically format according to the specified locale, ensuring correct separators, symbols, and date formats.
  3. This is especially useful for applications targeting users in different regions, providing a familiar and accessible data presentation.
  4. Refer to the demo code below for a working example and additional configuration options.
Adapting the chart's locale improves usability and ensures your data is presented in a way that aligns with your audience's expectations. 
<LineChart @ref="lineChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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);
    }
}

Interpolation modes #

The Interpolation Modes demo showcases how different interpolation settings affect the appearance and smoothness of lines in the LineChart component. Interpolation determines how data points are connected, allowing you to choose between straight lines, smooth curves, or monotone cubic curves for more natural transitions.

How to use:
  1. Prepare your chart data by defining Labels for the X-axis and one or more Datasets for the Y-axis values.
  2. For each dataset, set the CubicInterpolationMode property to control the interpolation style (e.g., "monotone" for monotone cubic interpolation, or leave unset for linear).
  3. Optionally, adjust the Tension property to fine-tune the curve smoothness.
  4. Add the LineChart component to your page, binding your data and options as shown in the demo code below.
  5. Experiment with different interpolation modes and tension values to achieve the desired visual effect for your data.
Using interpolation modes helps you present trends more clearly, making your charts easier to interpret and visually appealing. Refer to the demo code for practical implementation details. 
<LineChart @ref="lineChart" Width="600" />

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

    private int dataCount = 12;
    private List<double?> datapoints = [0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170];
    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(), Datasets = GetDefaultDataSets() };
        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);
    }

    #region Data Preparation

    private List<string> GetDefaultDataLabels()
    {
        var labels = new List<string>();

        for (var index = 0; index < dataCount; index++)
            labels.Add(index.ToString());

        return labels;
    }

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

        // 1.
        datasets.Add(new LineChartDataset
        {
            Label = "Cubic interpolation (monotone)",
            Data = datapoints,
            BorderColor = ChartJsColorExtensions.ToRgbString(ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalSixColors[0])),
            CubicInterpolationMode = "monotone",
            Fill = false,
            Tension = 0.4,
        });

        // 2.
        datasets.Add(new LineChartDataset
        {
            Label = "Cubic interpolation",
            Data = datapoints,
            BorderColor = ChartJsColorExtensions.ToRgbString(ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalSixColors[1])),
            Fill = false,
            Tension = 0.4,
        });

        // 3.
        datasets.Add(new LineChartDataset
        {
            Label = "Linear interpolation (default)",
            Data = datapoints,
            BorderColor = ChartJsColorExtensions.ToRgbString(ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalSixColors[2])),
            Fill = false,
        });

        return datasets;
    }

    #endregion Data Preparation
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!