Skip to content
quartiledocsv0.1
GitHub

Sparkline

PreviewSVGReads selection

A small line without axes for a trend inside a KPI, a table cell or a sentence.

Playground

Net revenue
Sep 7 – Oct 6, 2026
y
curve
<Sparkline
  data={daily}
  x="date"
  y="revenue"
  area
  color="var(--q-signal)"
  height={48}
/>

Installation

Sparkline is exported from @quartile/react, alongside every other chart and component.

git clone https://github.com/zinnoberHaus/quartile

Not on npm yet: build the package from the clone as described in Installation. The preview API may change before publication.

Usage

Pass rows with x and y, or a plain array of numbers. Width fills the container by default.

import { Sparkline } from '@quartile/react';

type DailyRevenue = { date: string; revenue: number };

export function Trend({ daily }: { daily: DailyRevenue[] }) {
  return (
    <Sparkline data={daily} x="date" y="revenue" area color="var(--q-signal)" aria-label="Revenue" />
  );
}

// or just numbers
<Sparkline data={[12, 14, 13, 17, 19]} />
Sparkline reads the nearest <Selection> and does not publish to it. See Linked selections.

Props

PropTypeDefaultDescription
datarequiredDataInput<R> | readonly number[]—Rows, a dataset, or a plain array of numbers.
xkeyof R & string—Orders points by this field (dates, numbers). Rows sharing an x are summed.
ykeyof R & string—Measure to draw. Not needed when data is an array of numbers.
comparekeyof R & string—Field with comparison values, drawn as a dashed muted line on the same scale.
areabooleanfalseFills under the line with a faint wash of the line color.
colorstring'var(--q-text)'Line color. Defaults to the text color; pass a token such as var(--q-signal).
heightnumber28Height in px. Defaults to 28.
widthnumber | string'100%'Width in px, or any CSS length. Defaults to filling the container.
curve'linear' | 'monotone' | 'step'Curve'monotone'Interpolation between points. Defaults to monotone.
formatFormatter—Formats values in the accessible summary. Defaults to the field's schema format.
selectionstring | false—Selection to read from. Defaults to the nearest; false opts out.
classNamestring——
styleCSSProperties——
aria-labelstring—Accessible name. A summary of the trend is appended automatically.
Frame and state props shared with the charts (5) · ChartStateProps
PropTypeDefaultDescription
loadingboolean | string—Shows the loading state at the chart's size, so the layout never jumps.
errorboolean | string | Error | null—Shows the error state. A string or Error becomes the message.
errorCodestring—Shown in the error state; copyable for support.
onRetry() => void——
empty{ title?: string; description?: string; action?: ReactNode }—Title and description for the empty state. Shown when there are no rows.

Accessibility

Keyboard
None. A sparkline is an image, not an interactive chart.
Screen readers
Rendered as an image whose name is your aria-label followed by a summary of the trend: range, change, low and high.
No table fallback
Sparkline does not accept view. Put the numbers it summarizes next to it, as KPI and DataTable do.
Report an issueBuilt Oct 21, 2026