SlopeChart: Blazor slope chart component

Examples

Basic

Each SlopeItem goes from Start to End; StartLabel and EndLabel head the two columns.

NPS by team, Q1 to Q4

website/Examples/Charts/SlopeChartBasicExample.razor Source

Colour by change

ColorByChange="true" draws rising lines in the success colour and falling ones in the error colour.

Deployments per week, before and after the new pipeline

website/Examples/Charts/SlopeChartChangeExample.razor Source

Playground

NPS by team, Q1 to Q4

StartLabel

EndLabel

ShowValues

ColorByChange

ValueFormat

Title

ShowTitle

AspectRatio

RowHeight

<SlopeChart
            StartLabel="Q1"
            EndLabel="Q4"
            Title="NPS by team, Q1 to Q4"
            Items="@_teams" />

@code {
    // Close values (Support and Billing in Q4) get their labels pushed apart automatically.
    private readonly SlopeItem[] _teams =
    [
        new("Support", 31, 52),
        new("Billing", 28, 51),
        new("Platform", 44, 39),
        new("Mobile", 12, 27),
        new("Search", 36, 35),
    ];
}

API

<SlopeChart>

DaisyBlazor.Charts

Parameters

AspectRatio double
= 1.33
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
ColorByChange bool
= false
Colour lines by direction (success when the value rises, error when it falls, neutral when flat) instead of the palette. An item's own Color still wins.
EndLabel string
= ""
Header over the right column, e.g. "Q4".
Items IReadOnlyList<SlopeItem>
= []
The lines. Items whose Start or End is not a finite number are skipped.
RowHeight double?
= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues bool
= true
Write each value next to the item's name at both ends.
StartLabel string
= ""
Header over the left column, e.g. "Q1".
Title string
= null
Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat string
= "{0:#,0.##}"
Format string for values in labels and tooltips, e.g. "{0:N0}".
Width string
= "100%"
CSS width of the chart wrapper.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended after the width on the wrapper.

Name	Type	Default	Description
AspectRatio	double	1.33	Width divided by height. The chart keeps this shape at any width; its text keeps its size.
ColorByChange	bool	false	Colour lines by direction (success when the value rises, error when it falls, neutral when flat) instead of the palette. An item's own Color still wins.
EndLabel	string	""	Header over the right column, e.g. "Q4".
Items	IReadOnlyList<SlopeItem>	[]	The lines. Items whose Start or End is not a finite number are skipped.
RowHeight	double?	null	Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
ShowValues	bool	true	Write each value next to the item's name at both ends.
StartLabel	string	""	Header over the left column, e.g. "Q1".
Title	string	null	Optional heading rendered above the chart; it is also the chart's accessible name.
ValueFormat	string	"{0:#,0.##}"	Format string for values in labels and tooltips, e.g. "{0:N0}".
Width	string	"100%"	CSS width of the chart wrapper.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended after the width on the wrapper.