Sparkline

Description

Sparkline draws a series of numbers as a small chart with no axes, labels, grid or tooltip, as a line or as bars. It reads the direction off the first and last value and colours itself: green for up, red for down, grey when the series ends where it started. A soft gradient area sits under the line and the first and last quarter fade out, so the shape reads as a slice of a longer series rather than a complete chart.

Use it where a number needs context in the space next to it: a metric card, a table cell showing a row's recent history, a list of accounts each with its own traffic curve. It is a glyph, not a chart.

Don't use it when the reader needs to read values off the picture. There are no axes and no tooltips by design, so anything that needs a scale, a legend, or a hover readout belongs in a real chart. Don't feed it a single point either: fewer than two values renders nothing.

Sparkline is a Create UI Pro component. Install it with a Pro seat.

Installation

pnpm dlx @create-ui/cli add sparkline

Usage

import { Sparkline } from "@/registry/pro/ui/sparkline"

<Sparkline data={[18, 22, 19, 26, 24, 31, 29, 35]} className="h-10" />

Sparkline has no intrinsic size. It fills its box in both directions, so give it a height, and a width if it is not already inside a sized column.

Examples

Every example is a Pro preview (marked with a Pro badge).

Line and bar

type defaults to line. A line reads as a continuous movement, so use it for anything sampled over time: revenue, traffic, latency. Bars read as discrete periods, so use them when each reading is its own countable thing: orders that day, tickets that week.

The two also measure differently. A line is scaled to the series' own range, because only its shape matters. Bars are measured against zero, because the reader compares their lengths. That also means a bar series with negative values gets a zero axis and bars on both sides of it.

When a bar series crosses zero, each bar takes the colour of its own sign rather than the colour of the overall trend: a fall below the axis cannot read as green. Force trend to opt out and paint the whole series one colour.

area, smoothing and marker belong to the line and are ignored by bars.

Trend

trend defaults to auto, which compares the last value against the first: higher is up, lower is down, equal is neutral. Pass up, down or neutral to force it, which is what you want when the direction means something the numbers don't say. Falling costs are good news, so that row is forced to up or held at neutral.

Area and fade

area paints a gradient under the line and fade softens the first and last quarter. Both default to true. Turn fade off when the series really is complete and you want the ends to read as hard endpoints. Turn area off in dense rows, where the fill competes with the text next to it.

Marker

marker puts a dot on the last reading. It is off by default and drawn outside the fade, so the dot stays solid where the line softens. That reads best with fade turned off, which is what this example does.

Use it in a metric card, where the eye should land on "where we are now". Skip it in a dense table column: at row height the dot competes with the line instead of anchoring it.

Gaps

A missing reading is null, never 0. The line breaks across the gap, and the y scale is measured from the readings that exist, so one hole does not drag the floor down. Passing 0 instead says the opposite: the value really was zero.

Smoothing

smoothing goes from 0 to 1 and defaults to 1. At 1 every corner is rounded, at 0 the points are joined by straight segments. Values between the two ease off the curve. The curve never overshoots above a peak or below a trough, so a rounded line still tells the truth about the highest and lowest values.

Shared scale

By default the y scale is the series' own minimum and maximum, so every sparkline fills its box top to bottom. That is what you want for a single card, and misleading for a column of them: a row that moved from 8 to 16 looks exactly like a row that moved from 62 to 78.

Pass the same min and max to every sparkline in a group and they become comparable. Anchoring min at 0 also keeps a small wobble from looking like a cliff.

Accessibility

Sparkline is decorative by default. It renders an <svg>, is not focusable and has no keyboard interactions.

ARIA notes:

• With no aria-label the root is aria-hidden="true" and has no role, so screen readers skip it. This is the right default: the number next to the sparkline already carries the information.
• Pass aria-label and the root becomes role="img" with that label. Describe the movement, not the picture: aria-label="Revenue up 18% over the last 16 weeks".
• Never let the sparkline be the only carrier of a fact. Colour is the only thing that separates a rise from a fall, so the direction has to be readable somewhere else too, in text or in an adjacent badge.

Styling

Tailwind override: pass className to size it and, when you want to override the direction colouring, to set the line and area colours.

<Sparkline
  data={values}
  className="text-primary-weak [&_path]:stroke-primary-base h-8 w-32"
/>

The area gradient resolves currentColor off the <svg>, so a text-* class on the root recolours the fill. The line is stroked by the trend class, so overriding it takes a [&_path]:stroke-* on the root.

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="sparkline" on the root <svg>.
• data-trend="up" | "down" | "neutral" on the root, after auto has been resolved.
• data-slot="sparkline-marker" on the last-reading dot, when marker is set.
• data-slot="sparkline-bar" on each bar, when type="bar".

Target one direction in CSS:

[data-slot="sparkline"][data-trend="down"] {
  /* … */
}

Related Components

• Table: a Table.Cell with variant="trend" gives the sparkline the cell box instead of the padding.
• Status Badge: the text counterpart for direction, for when colour alone is not enough.
• Progress: a single value against a known total, where a sparkline shows a series over time.

API Reference

Sparkline

Trend line for a numeric series. Extends React.ComponentProps<"svg"> without children, so any standard svg attribute (id, aria-*, style, etc.) is accepted.

Props

Variants

Sparkline has no CVA variants. Colour follows trend: