Blazorise SVG Chart Trendlines

Calculate and render trendlines directly in SVG charts.

SVG chart trendlines can be declared as child components with SvgChartTrendline or supplied through SvgChartOptions.Trendlines. Each trendline targets a source series by name.

Examples

Declarative trendline

Add a trendline to a chart by declaring SvgChartTrendline inside the chart.
1 series, 7 categories.Monthly revenueLinear trendline declared in markup020406080100120JanFebMarAprMayJunJulRevenue
<SvgColumnChart TItem="MonthlySales"
                Items="@sales"
                Options="@options">
    <SvgChartTitle Title='@("Monthly revenue")' Subtitle='@("Linear trendline declared in markup")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartTrendline SeriesName="Revenue"
                       Color="Color.Danger"
                       StrokeWidth="2.5"
                       DashPattern="8 5" />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgColumnSeries Name="Revenue" Value="@( item => item.Revenue )" Color="Color.Primary" BorderRadius="4" />
</SvgColumnChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlySales> sales =
    [
        new() { Month = "Jan", Revenue = 82 },
        new() { Month = "Feb", Revenue = 88 },
        new() { Month = "Mar", Revenue = 93 },
        new() { Month = "Apr", Revenue = 91 },
        new() { Month = "May", Revenue = 104 },
        new() { Month = "Jun", Revenue = 112 },
        new() { Month = "Jul", Revenue = 118 },
    ];

    private sealed class MonthlySales
    {
        public string Month { get; set; }

        public double Revenue { get; set; }
    }
}

Options trendlines

Configure multiple trendlines through SvgChartOptions.Trendlines.
2 series, 6 categories.Acquisition channelsTrendlines configured from options01020304050607080JanFebMarAprMayJunOrganicPaid
<SvgLineChart TItem="AcquisitionSample"
              Items="@samples"
              Options="@options">
    <SvgChartTitle Title='@("Acquisition channels")' Subtitle='@("Trendlines configured from options")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="Organic" Value="@( item => item.Organic )" Color="Color.Primary" MarkerRadius="4" />
    <SvgLineSeries Name="Paid" Value="@( item => item.Paid )" Color="Color.Success" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        Trendlines =
        [
            new()
            {
                SeriesName = "Organic",
                Name = "Organic trend",
                Color = Color.Primary,
                StrokeWidth = 2,
                DashPattern = "8 5",
            },
            new()
            {
                SeriesName = "Paid",
                Name = "Paid trend",
                Color = Color.Success,
                StrokeWidth = 2,
                DashPattern = "4 4",
            },
        ],
    };

    private readonly List<AcquisitionSample> samples =
    [
        new() { Month = "Jan", Organic = 46, Paid = 31 },
        new() { Month = "Feb", Organic = 52, Paid = 38 },
        new() { Month = "Mar", Organic = 55, Paid = 42 },
        new() { Month = "Apr", Organic = 61, Paid = 45 },
        new() { Month = "May", Organic = 67, Paid = 52 },
        new() { Month = "Jun", Organic = 72, Paid = 57 },
    ];

    private sealed class AcquisitionSample
    {
        public string Month { get; set; }

        public double Organic { get; set; }

        public double Paid { get; set; }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page