patterns

Sparkline

Dependency-free SVG sparkline for timeseries previews in detail panels and table cells. Optional `splitAt` adds a vertical dashed marker for recent-vs-baseline windows.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/sparkline.json

Or import from the workspace package:

import { Sparkline, SparklineProps } from "@8maverik8/design";

Examples

60-day series with -30d marker

<Sparkline
  points={dailyEvents}
  width={480}
  height={80}
  splitAt={30}
  splitLabel="-30d"
/>

Guidelines

Set `width` / `height` explicitly when the parent has no fixed dimensions.SVG without intrinsic size collapses to 0×0.
Use this when you need axes / hover tooltips.Sparkline is a glance affordance. For real charts, reach for a charting library — outside the scope of this design system.