Sparkline

Compact inline SVG trend chart — drop anywhere: table cells, KPI strips, notification badges.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Sparkline />

Show a trend inline next to a number, label, or status
Add tiny charts to DataGrid/Table cells without reaching for the full Chart component
Compose Tremor-style KPI strips where space is limited
Prefer SparkCard when you need a framed tile, or Chart for axes, tooltips, and legends

Basic line

$12,450

+4.2%

Area variant

Bars variant

With last-point dot

In a table cell

Ticker	Price	Change
AAPL	$189.42	+1.8%
MSFT	$412.90	+0.6%
TSLA	$243.11	-2.3%
NVDA	$916.55	+3.4%

Type (interactive)

Switch chart type to compare Line, Area, and Bars.

Color variants

Revenue

$48,290

Errors

1,204

Sessions

8,492

Property	Type	Default	Description
Values	IEnumerable<double>?	null	Series to plot. If null/empty, a muted baseline is rendered.
Height	int	32	Rendered pixel height (also the viewBox Y).
Color	string?	var(--color-primary)	CSS color for stroke/fill. Accepts any CSS color or var().
Type	SparkType	Line	Line, Area, or Bars.
ShowArea	bool	false	Shortcut — fill under the line when Type=Line.
ShowLast	bool	false	Render a small dot at the last value.
StrokeWidth	double	1.5	Line stroke width (unscaled via vector-effect).
AriaLabel	string?	"Trend"	Accessible label for the SVG role=img.
Class	string?	null	Extra classes appended to the root SVG.