Other

Sparkline

Word-sized, axis-free trend chart rendered inline with text — ideal for table cells and stat tiles. Values are normalized against the true min/max of the series (the baseline is not pinned to zero); a flat series renders as a midline.

Import

import { Sparkline } from "@zephora/react";

Examples

Variants

Three mark shapes: `line` (with a dot on the final value), `area` and `bar`.

const trend = [4, 6, 5, 9, 7, 12, 10, 14];

<Sparkline data={trend} variant="line" />
<Sparkline data={trend} variant="area" />
<Sparkline data={trend} variant="bar" />

In a table cell

The component renders as an inline `<span>`, so it drops straight into table cells for mini trend columns.

ZPH		+8.2%
ACME		-5.1%
INIT		+3.4%

const stocks = [
  { name: "ZPH", trend: [12, 14, 13, 17, 16, 21], change: "+8.2%" },
  { name: "ACME", trend: [30, 28, 29, 25, 26, 22], change: "-5.1%" },
  { name: "INIT", trend: [8, 8, 9, 8, 10, 12], change: "+3.4%" },
];

<table>
  <tbody>
    {stocks.map((stock) => (
      <tr key={stock.name}>
        <td>{stock.name}</td>
        <td>
          <Sparkline
            data={stock.trend}
            variant="line"
            width={90}
            height={20}
            color={stock.change.startsWith("-") ? "#dc2626" : "#16a34a"}
            aria-label={`${stock.name} 6-day trend`}
          />
        </td>
        <td>{stock.change}</td>
      </tr>
    ))}
  </tbody>
</table>

Sizing and stroke

`width`/`height` set the SVG box; `strokeWidth` tunes the line weight and `showLastPoint={false}` drops the final-value dot.

<Sparkline data={data} width={160} height={40} strokeWidth={2.5} />
<Sparkline data={data} width={160} height={40} strokeWidth={1} showLastPoint={false} />

API

Sparkline props

Prop	Type	Default	Description
`data` *	`number[]`	—	Series values, rendered left to right.
`variant`	`"line" \| "area" \| "bar"`	`"line"`	Mark shape.
`width`	`number`	`100`	SVG width in px.
`height`	`number`	`24`	SVG height in px.
`color`	`string`	—	Mark color. Defaults to the primary token.
`showLastPoint`	`boolean`	`true`	Emphasizes the final value with a dot (line variant only).
`strokeWidth`	`number`	`1.5`	Line thickness for line/area variants.
`aria-label`	`string`	`"sparkline"`	Accessible name of the chart; the SVG title also announces min, max and last values.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLSpanElement>`	—	All native span props are forwarded to the inline wrapper.