スパークラインSparklineChartExperimental

密度の高いカード向けの小さな線・面・ステップチャートです。

プレビュー

データ

状態とバリエーション

線表示

密度の高いカードで使うシンプルな傾向線です。

面表示

塗りを加えて傾向を強調します。

ステップ

段階的な変化やしきい値の推移に使います。

基準線

目標値や平均値を点線で表示します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
dataArray<number | { label?: ReactNode; value: number }>-コンパクトなチャート幅に表示する数値トレンドです。
variant"line" | "area" | "step""line"線・面・ステップを切り替える SSOT 登録済みバリエーションです。
referenceValuenumber-任意の点線基準値です。
formatValue(value: number) => ReactNode-各値を整形します。関数propのため Client Component からのみ渡すこと（Server Component から渡すと next build が落ちる）。RSC 安全な整形には valueFormat を使う。
valueFormat"number" | "compact" | "integer" | Intl.NumberFormatOptions-シリアライズ可能な数値フォーマット＝formatValue の RSC 安全な代替。formatValue 指定時は無視。en-US ロケール固定。(#338)

使い方

import { SparklineChart } from "@gunjo/ui";

const data = [
    { label: "1月", value: 24 },
    { label: "2月", value: 28 },
    { label: "3月", value: 22 },
    { label: "4月", value: 36 },
    { label: "5月", value: 32 },
    { label: "6月", value: 44 },
    { label: "7月", value: 39 },
    { label: "8月", value: 52 },
    { label: "9月", value: 48 },
    { label: "10月", value: 57 },
    { label: "11月", value: 51 },
    { label: "12月", value: 64 },
];

export function MonthlyTrendSparklineVariants() {
    return (
        <div className="grid gap-6">
            <SparklineChart data={data} />
            <SparklineChart data={data} variant="area" color="success" />
            <SparklineChart
              data={data}
              variant="step"
              referenceValue={50}
              referenceLabel="目標"
            />
        </div>
    );
}

設計の判断

  • 縦軸の範囲を固定する指定が、まだありません。SparklineChart は常に、そのデータの最小値から最大値までで正規化します（referenceValue を渡すと、その値も範囲に入ります）。資料が最も起きやすい間違いに挙げる「並べたときにスケールがそろわない」を、この部品では防げません。同じ単位のスパークラインを並べて形を比べたいときは、min と max を持つ LineChart に移ってください。
  • 点ごとに、縦に貫く帯を置きました。当たり判定は点そのものではなく、その時点から次の時点までを縦いっぱいに覆う帯です。ホバーは図のどこでも近い時点を拾い、キーボードは帯を1つずつたどります。読み上げ名は「時点: 値」です。資料はスパークラインをフォーカス可能にしないよう薦めています（20行の一覧でタブ位置が 160 個になるためです）。GUNJO は、値がツールチップにしか無いことを重く見て帯を残しました。一覧に並べるときは、行が増えるぶんタブ位置も増えることを見込んでください。
  • 点は、既定では出しません。showDots の既定は false です（LineChart は true）。スパークラインが伝えるのは向きだけなので、点を出すと小さな折れ線に近づいてしまいます。variant="step" は在庫や料金プランのように段階的に変わる値のためのもので、連続した値に使うと実際より急な変化に見えます。referenceLabel の既定は英語の「Reference」です。何の線かは、図の外の文字でも書いてください。
    UIXHERO: スパークライン（Sparkline Chart）

使用コンポーネント

スパークラインチャート凡例ツールチップ

関連コンポーネント

折れ線チャート分析カード