Data Display

Sparkline

Tiny inline line, area, or bar trend chart for stat tiles.

Import

tsx

import { Sparkline } from "@cooud-ui/ui";

bash

npx cooud-ui add sparkline

Examples

Line, area & bar

Three rendering modes from the same series. `area` fills a token-tinted gradient under the line; `bar` plots evenly spaced columns. Each is a tiny inline SVG that scales to its `width`/`height`.

tsx

<div className="flex items-center gap-8">
  <Sparkline data={[4, 6, 5, 8, 7, 11, 9, 13]} tone="primary" />
  <Sparkline data={[4, 6, 5, 8, 7, 11, 9, 13]} tone="success" area />
  <Sparkline data={[4, 6, 5, 8, 7, 11, 9, 13]} type="bar" tone="info" />
</div>

In stat cards

Pair a Sparkline with a Metric to give a KPI tile an at-a-glance trend. The sparkline's tone tracks the delta's direction.

Revenue

$48,290

+12.5%

Active users

9,830

+4.1%

Churn

2.1%

-0.4%

tsx

<div className="grid gap-4 sm:grid-cols-3">
  <Card>
    <CardContent className="flex flex-col gap-3 pt-6">
      <Metric>
        <MetricLabel>Revenue</MetricLabel>
        <MetricValue>$48,290</MetricValue>
        <MetricDelta trend="up">+12.5%</MetricDelta>
      </Metric>
      <Sparkline
        data={[18, 22, 19, 27, 24, 31, 29, 38]}
        tone="success"
        area
        className="w-full"
        height={36}
        aria-label="Revenue, trending up"
      />
    </CardContent>
  </Card>
  <Card>
    <CardContent className="flex flex-col gap-3 pt-6">
      <Metric>
        <MetricLabel>Active users</MetricLabel>
        <MetricValue>9,830</MetricValue>
        <MetricDelta trend="up">+4.1%</MetricDelta>
      </Metric>
      <Sparkline
        data={[40, 38, 42, 41, 45, 44, 48, 52]}
        tone="primary"
        className="w-full"
        height={36}
        aria-label="Active users, trending up"
      />
    </CardContent>
  </Card>
  <Card>
    <CardContent className="flex flex-col gap-3 pt-6">
      <Metric>
        <MetricLabel>Churn</MetricLabel>
        <MetricValue>2.1%</MetricValue>
        <MetricDelta trend="down">-0.4%</MetricDelta>
      </Metric>
      <Sparkline
        data={[9, 8, 8, 7, 6, 6, 5, 4]}
        type="bar"
        tone="error"
        className="w-full"
        height={36}
        aria-label="Churn, trending down"
      />
    </CardContent>
  </Card>
</div>

API Reference

Generated from the component's exported types.

SparklineProps

Extends Omit<SVGAttributes<SVGSVGElement>, "type">

Prop	Type	Default	Description
`data`*	`number[]`	—	The series to plot. Order is preserved; values map left→right.
`width`	`number`	`96`	Intrinsic width of the SVG in px.
`height`	`number`	`28`	Intrinsic height of the SVG in px.
`type`	`SparklineType`	`"line"`	Render a connected line or evenly spaced bars.
`tone`	`SparklineTone`	`"primary"`	Color, mapped to a token via `currentColor`.
`area`	`boolean`	`false`	For `type="line"`, fill a soft token-tinted gradient under the line.
`strokeWidth`	`number`	`1.5`	Stroke width of the line (line type only).