Skip to main content
Sparklines are tiny charts designed to sit inline next to text. They communicate trend and shape rather than precise values — no axes, no labels, no tooltips. Pass a flat list of numbers and Sparkline auto-scales the Y axis to fit.

​
Basic Usage

​
Variants

Semantic variants color the line to match the rest of your UI. These are the same six variants used by Progress, Slider, and Ring.

​
Area Fill

Set fill=True to shade the area under the line. The fill color inherits from the variant with a gradient that fades to transparent.

​
Step Curve

Set curve="step" to connect points with discrete jumps instead of straight lines.

​
Custom Colors

Use indicator_class for colors beyond the built-in variants. Since the sparkline line is an SVG stroke, use stroke-* classes.

​
Size and Stroke

Control dimensions with height and css_class for width. Use stroke_width to adjust line thickness.

​
In a Table

Sparklines sit naturally in table cells. Use Table (not DataTable) since sparklines are components, not plain values.

​
API Reference

Sparkline Parameters

​
data
list[int | float] | str
required
Flat list of numeric values, or a {{ field }} interpolation reference.
​
height
int
default:"24"
Chart height in pixels.
​
variant
str
default:"default"
Visual variant: "default", "success", "warning", "destructive", "info", "muted".
​
indicator_class
str | None
default:"None"
Tailwind classes for the line/fill. Use stroke-* classes for color overrides.
​
fill
bool
default:"False"
Show a gradient area fill under the line.
​
curve
Literal["linear", "step"]
default:"\"linear\""
Line interpolation style between data points.
​
stroke_width
float
default:"1.5"
Line thickness in pixels.
​
mode
Literal["line", "bar"]
default:"\"line\""
Chart mode: "line" draws a polyline, "bar" draws vertical bars.
​
css_class
str | None
default:"None"
Tailwind classes for the outer container. Use w-* classes to control width.

​
Protocol Reference

Sparkline
{
  "type": "Sparkline",
  "data": "[number] | string (required)",
  "height?": 24,
  "variant?": "default | success | warning | destructive | info | muted",
  "indicatorClass?": "string",
  "fill?": false,
  "curve?": "linear | step",
  "strokeWidth?": 1.5,
  "mode?": "line | bar",
  "cssClass?": "string"
}
For the complete protocol schema, see Sparkline.