Sparkline

Word-sized trend without axes. Always pair with the number it describes.

Import

import { Sparkline } from '@marbleui/ui'

Props

<Sparkline>

Prop	Type	Default	Description
data *required	`number[]`	`—`
label *required	`string`	`—`	Accessible description, e.g. "Revenue up 12% over 30 days".
className	`string`	`—`
color	`string`	`—`
height	`number`	`28`
invert	`boolean`	`—`	With `trendColor`: rising is bad (churn, cost, latency), so up draws in danger and down in success.
trendColor	`boolean`	`—`	Color the line by direction (last vs first).
variant	`'bar' \| 'line' \| 'area'`	`'line'`
width	`number`	`96`

Usage notes

A word-sized trend with no axes, labels or tooltip, placed next to the number it describes in a table cell or KPI row. For a full KPI tile use Stat; for a chart people read values from use LineChart.

<span className="flex items-center gap-3">
  <span className="font-medium tabular-nums">1,204</span>
  <Sparkline data={weeklySignups} label="Signups up 18% over 12 weeks" trendColor />
</span>

label is required and becomes the accessible name of the role="img" SVG; write the takeaway, not “sparkline”.
trendColor picks success or danger by comparing the last value with the first. For metrics where falling is good (churn, costs, latency) add invert, so a rise draws in danger. color overrides both.
variant is line (default), area or bar. Lines and areas scale between the data’s min and max, so small moves look large; bars start at zero.
An empty data array draws a flat gray line in every variant. Size is width × height, default 96 × 28.

Example source · show

import { Sparkline } from './sparkline'

const up = [12, 14, 13, 17, 16, 19, 22, 21, 24, 27, 26, 30]
const down = [30, 28, 29, 25, 26, 22, 21, 23, 19, 17, 18, 15]

const Row = ({ name, value, data, invert }: { name: string; value: string; data: number[]; invert?: boolean }) => (
  <div className="flex items-center gap-4 text-sm">
    <span className="w-24 text-fg-muted">{name}</span>
    <span className="w-16 font-medium text-fg tabular-nums">{value}</span>
    <Sparkline data={data} trendColor invert={invert} label={`${name} trend`} />
  </div>
)

export const styles = {
  'In a list': () => (
    <div className="flex flex-col gap-3">
      <Row name="Signups" value="1,204" data={up} />
      <Row name="Churn" value="2.1%" data={down} invert />
      <Row name="Revenue" value="$48.2K" data={up.map((v) => v * 1.3)} />
    </div>
  ),
  Variants: () => (
    <div className="flex items-center gap-6">
      <Sparkline data={up} label="Line" />
      <Sparkline data={up} variant="area" label="Area" width={120} height={36} />
      <Sparkline data={up} variant="bar" label="Bars" />
    </div>
  ),
}

Source: packages/ui/src/sparkline/sparkline.tsx

Catalog