Blazorise Chart Trendline component
Draw a linear trendline on your chart.
📊 The Community License has a limitation of 10 points per chart. Unlock full access to all features with
our premium plans.
Trendline is made possible with the help of chartjs-plugin-trendline.
To use Chart Trendline, install the Blazorise.Charts.Trendline package. It depends on Blazorise.Charts.
Installation
NuGet
Install chart trendline extension from NuGet.Hide code example
Copy code
dotnet add package Blazorise.Charts.Trendline
Imports
In your main _Imports.razor add:
@using Blazorise.Charts
@using Blazorise.Charts.Trendline
Example
Hide code example
Copy code
@using Blazorise.Charts @using Blazorise.Charts.Trendline <Button Color="Color.Primary" Clicked="">Toggle trendline and redraw</Button> <Chart @ref="chart" TItem="double?" Type="ChartType.Line"> <ChartTrendline @ref="chartTrendline" TItem="double?" /> </Chart>
@code { Chart<double?> chart; ChartTrendline<double?> chartTrendline; protected override async Task OnAfterRenderAsync( bool firstRender ) { if ( firstRender ) { await HandleRedraw(); } } bool trendlinesOn = true; async Task OnButtonClicked() { trendlinesOn = !trendlinesOn; await HandleRedraw(); } async Task HandleRedraw() { await chart.Clear(); await chart.AddLabels( Labels ); await chart.AddDataSet( GetLineChartDataset() ); await chart.AddDataSet( GetLineChartDataset() ); await chart.Update(); // Add the trendline(s) after you have added the datasets and called await chart.Update(); if ( trendlinesOn ) { // This will add a trendline to the second dataset. // If you want to add it to the first dataset, set DatasetIndex = 0 (or don't set it at all as 0 is default) var trendlineData = new List<ChartTrendlineData> { new ChartTrendlineData { DatasetIndex = 1, Width = 10, Color = ChartColor.FromRgba( 54, 162, 235, .6f ) } }; await chartTrendline.AddTrendLineOptions( trendlineData ); } } LineChartDataset<double?> GetLineChartDataset() { return new LineChartDataset<double?> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = BackgroundColors, BorderColor = BorderColors, Fill = true, PointRadius = 2, BorderDash = new List<int> { } }; } private static string[] Labels = { "A", "B", "C", "D", "E", "F" }; private static List<string> BackgroundColors = new() { ChartColor.FromRgba( 76, 110, 245, 0.25f ), // Indigo ChartColor.FromRgba( 18, 184, 134, 0.25f ), // Teal ChartColor.FromRgba( 245, 159, 0, 0.25f ), // Amber ChartColor.FromRgba( 240, 62, 62, 0.25f ), // Red ChartColor.FromRgba( 132, 94, 247, 0.25f ), // Purple ChartColor.FromRgba( 34, 139, 230, 0.25f ) // Blue }; private static List<string> BorderColors = new() { ChartColor.FromRgba( 76, 110, 245, 1f ), // Indigo ChartColor.FromRgba( 18, 184, 134, 1f ), // Teal ChartColor.FromRgba( 245, 159, 0, 1f ), // Amber ChartColor.FromRgba( 240, 62, 62, 1f ), // Red ChartColor.FromRgba( 132, 94, 247, 1f ), // Purple ChartColor.FromRgba( 34, 139, 230, 1f ) // Blue }; List<double?> RandomizeData() { var r = new Random( DateTime.Now.Millisecond ); return new List<double?> { r.Next( 3, 20 ) * r.NextDouble(), r.Next( 3, 30 ) * r.NextDouble(), r.Next( 3, 40 ) * r.NextDouble(), r.Next( 3, 50 ) * r.NextDouble(), r.Next( 3, 60 ) * r.NextDouble(), r.Next( 3, 70 ) * r.NextDouble() }; } }
API
See the API reference for the parameters, events, methods, and related types available to the components covered on this page.