Sparkline: Blazor sparkline component

Examples

Basic

Area fills under the line, ShowEndDot marks the latest value, StrokeWidth sets the weight.

Signups With area No end dot

website/Examples/Charts/SparklineBasicExample.razor Source

In a table

Width and Color (any CSS colour) let each row show its own trend.

Service	Last 7 days	Requests
Billing API		40,150
Auth service		38,400
Search		20,550

website/Examples/Charts/SparklineTableExample.razor Source

Type="SparklineKind.Column" draws one bar per value from zero, negative ones down in NegativeColor (the error colour by default); SparklineKind.WinLoss draws equal bars up or down by sign, with a gap for zero.

Net new workspaces Nightly builds

website/Examples/Charts/SparklineKindsExample.razor Source

Trend line and normal range

ShowTrendline adds the dashed least-squares line across the values; NormalMin and NormalMax shade the expected range behind them. Both work on lines and columns.

p95 latency Error rate

website/Examples/Charts/SparklineTrendExample.razor Source

Playground

Type SparklineKind

NegativeColor

ShowTrendline

NormalMin

NormalMax

Area

ShowEndDot

StrokeWidth

Color

Height

Title

<Sparkline Data="@_signups" />

@code {
    private readonly double[] _signups = [12, 18, 15, 22, 19, 27, 31];
}

API

<Sparkline>

DaisyBlazor.Charts

Parameters

Area bool
= false
Fill the area beneath the line.
Color string
= null
Optional explicit CSS color; defaults to the primary theme token.
Data IReadOnlyList<double>
= []
The values to plot, oldest-to-newest.
Height string
= "1.5rem"
CSS height (inline; defaults to a compact cell size).
NegativeColor string
= null
CSS colour of the bars of negative values (Column and WinLoss); defaults to the error theme token.
NormalMax double?
= null
High end of the normal range, shaded behind the values with NormalMin (Line and Column).
NormalMin double?
= null
Low end of the normal range, shaded behind the values with NormalMax (Line and Column).
ShowEndDot bool
= true
Draw a dot on the most recent value.
ShowTrendline bool
= false
Draw the least-squares line across the values, dashed (Line and Column).
StrokeWidth double
= 2
Line stroke width in user units.
Title string
= null
Accessible description; defaults to a generic sparkline label.
Type SparklineKind
= SparklineKind.Line
Draw a line (default), a column per value, or win/loss bars by sign.
Width string
= "5rem"
CSS width (inline; defaults to a compact cell size).
Class string
= null
Extra CSS classes merged onto the sparkline's inline box.
Style string
= null
Inline CSS style appended after the Width/Height declarations on the sparkline's inline box.

Name	Type	Default	Description
Area	bool	false	Fill the area beneath the line.
Color	string	null	Optional explicit CSS color; defaults to the primary theme token.
Data	IReadOnlyList<double>	[]	The values to plot, oldest-to-newest.
Height	string	"1.5rem"	CSS height (inline; defaults to a compact cell size).
NegativeColor	string	null	CSS colour of the bars of negative values (Column and WinLoss); defaults to the error theme token.
NormalMax	double?	null	High end of the normal range, shaded behind the values with NormalMin (Line and Column).
NormalMin	double?	null	Low end of the normal range, shaded behind the values with NormalMax (Line and Column).
ShowEndDot	bool	true	Draw a dot on the most recent value.
ShowTrendline	bool	false	Draw the least-squares line across the values, dashed (Line and Column).
StrokeWidth	double	2	Line stroke width in user units.
Title	string	null	Accessible description; defaults to a generic sparkline label.
Type	SparklineKind	SparklineKind.Line	Draw a line (default), a column per value, or win/loss bars by sign.
Width	string	"5rem"	CSS width (inline; defaults to a compact cell size).
Class	string	null	Extra CSS classes merged onto the sparkline's inline box.
Style	string	null	Inline CSS style appended after the Width/Height declarations on the sparkline's inline box.

Sparkline