Sparkline

An inline trend chart for table cells and KPI tiles.

Draws a sequence of numbers as a small line or bar chart — no axes, no legend. It is a single <svg>, not an EChart, so dozens of them inside table cells or tiles stay cheap.

export const client = "only";

import { Sparkline } from "@squadbase/vantage/components";

const revenue = [
  { value: 82 },
  { value: 91 },
  { value: 74 },
  { value: 96 },
  { value: 88 },
  { value: 120 },
  { value: 114 },
  { value: 138 },
];

export default function Example() {
  return (
    <div className="flex w-[30rem] flex-col gap-6 text-sm">
      <div>
        <span className="text-muted-foreground">line</span>
        <Sparkline data={revenue} />
      </div>
      <div>
        <span className="text-muted-foreground">line + area</span>
        <Sparkline data={revenue} area />
      </div>
      <div>
        <span className="text-muted-foreground">bar</span>
        <Sparkline data={revenue} variant="bar" color="text-chart-2" />
      </div>
      <div className="flex items-center gap-3">
        <span className="text-muted-foreground">セルの中</span>
        <Sparkline data={revenue} height={16} className="w-20 shrink-0" />
        <span className="font-medium">¥1,240,000</span>
      </div>
    </div>
  );
}

import { Sparkline } from "@squadbase/vantage/components";
import type { SparklineDataPoint, SparklineVariant } from "@squadbase/vantage/components";

PropType

data?SparklineDataPoint[]

An array of `{ value: number; label?: string }`. **Required.** An empty array draws nothing.

TypeSparklineDataPoint[]

variant?"line" | "bar"

Line or bars.

Type"line" | "bar"

Default"line"

height?number

Height in px; the width fills the parent.

Typenumber

Default40

color?string

A Tailwind **text-* class**; it drives stroke and fill through `currentColor`.

Typestring

Default"text-chart-1"

area?boolean

Fill under the line (`line` only).

Typeboolean

Defaultfalse

animate?boolean

Draw in on mount.

Typeboolean

Defaultfalse

className?string

Classes to add.

Typestring

Any remaining props go straight to the <svg>.

Sizing

preserveAspectRatio="none" stretches the chart horizontally, so the parent decides the width. Inside a table cell, constrain both.

<Sparkline data={points} height={16} className="w-20 shrink-0" />

Sparkline or EChart

Reach for EChart when you need axes, a legend, tooltips or multiple series. Sparkline conveys the shape of a series and nothing else — no ticks, no numbers.