Skip to main content

Documentation Index

Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt

Use this file to discover all available pages before exploring further.

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.