Skip to content

Sparkline

SVG

A small trend line with the latest point marked.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/sparkline.json

No motion engine needed.

Usage

import { Sparkline } from "@/components/spotcheck/sparkline"

<Sparkline values={[30, 34, 33, 38, 41]} label="Requests rose from 30k to 41k" />

Leave out label when the numbers are already printed nearby, and it's hidden from screen readers.

Props

  • values * Requirednumber[]Default —
  • labelstringDefault —Describes the trend for screen readers. Leave it out if the numbers are printed nearby.

Keyboard

Nothing to operate: this component displays information.

Reduced motion

Nothing here animates.