スパークライン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 },
];

<SparklineChart data={data} />
<SparklineChart data={data} variant="area" color="success" />
<SparklineChart data={data} variant="step" referenceValue={50} referenceLabel="目標" />

使用コンポーネント

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

関連コンポーネント

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