Sparkline

表のセルや KPI タイルに置く、インラインの推移グラフ。

数値の並びを、軸も凡例もない小さな折れ線・棒で描きます。EChart ではなく単一の <svg> なので、表のセルやタイルに何十個並べても軽いままです。

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[]

`{ value: number; label?: string }` の配列。**必須**。空配列なら何も描かない。

TypeSparklineDataPoint[]

variant?"line" | "bar"

折れ線か棒か。

Type"line" | "bar"

Default"line"

height?number

高さ（px）。幅は親要素いっぱい。

Typenumber

Default40

color?string

Tailwind の **text-* クラス**。`currentColor` 経由で線と塗りの両方に効く。

Typestring

Default"text-chart-1"

area?boolean

折れ線の下を薄く塗る（line のみ）。

Typeboolean

Defaultfalse

animate?boolean

マウント時に描画アニメーションする。

Typeboolean

Defaultfalse

className?string

足すクラス。

Typestring

残りの props は <svg> にそのまま渡ります。

大きさを決める

preserveAspectRatio="none" で横方向に引き伸ばすので、幅は親要素が決めます。表のセルに入れるときは幅と高さを絞ってください。

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

EChart との使い分け

軸・凡例・ツールチップ・複数系列が要るなら EChart を使います。 Sparkline が持つのは「値の並びの形」だけで、目盛りも数値も出しません。