折れ線チャートLineChartBeta

複数系列の時系列比較に使う線・面チャートです。

プレビュー

データ

対象: 1月

状態とバリエーション

線表示

時系列を直接比較する SSOT 登録済みの線バリエーションです。

面表示と凡例

面の塗り、基準線、系列凡例を加えてダッシュボードで読みやすくします。

点なし

個別の点より傾向線を優先したい場合はマーカーを非表示にします。

範囲固定

複数チャートのスケールを揃えたい場合に縦軸の範囲を固定します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
series{ label?: ReactNode; data: Array<number | { label?: ReactNode; value: number }>; color?: ChartColor }[]-チャート幅に沿って表示する系列と各点の値です。
variant"area" | "line""line"線表示と面表示を切り替える SSOT 登録済みバリエーションです。
referenceValuenumber-任意の点線基準値です。
showLegendbooleanfalse系列のチャート凡例を表示します。
showDotsbooleantrue各データ点のマーカーを表示します。

使い方

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

const series = [
  {
    label: "売上",
    color: "primary",
    data: [
      { label: "1月", value: 42 },
      { label: "2月", value: 58 },
      { label: "3月", value: 36 },
    ],
  },
  {
    label: "目標",
    color: "success",
    data: [
      { label: "1月", value: 46 },
      { label: "2月", value: 52 },
      { label: "3月", value: 48 },
    ],
  },
];

export function RevenueTrendVariants() {
    return (
        <div className="grid gap-6">
            <LineChart series={series} />
            <LineChart series={series} variant="area" showLegend />
            <LineChart
              series={series}
              referenceValue={50}
              referenceLabel="目標"
              showDots={false}
            />
        </div>
    );
}

設計の判断

  • 縦軸はゼロに固定していません。棒グラフとは逆の判断です。折れ線は長さではなく傾きで読ませる図なので、既定の範囲はデータの最小値から最大値までで、min と max で固定できます。ただし GUNJO の LineChart は縦軸の目盛りの数字を描きません（showLabels が出すのは横軸のラベルだけです）。資料が求める「ゼロから始まっていないと分かるようにする」は、図の外の文字で書いてください。referenceValue は範囲の計算に入るので、基準線が枠の外に出ることはありません。
  • 線は SVG で描き、当たり判定は HTML で置いています。線と点と補助線の <svg> は aria-hidden かつ pointer-events-none で、その上に時点ごとの透明な丸（28px）を HTML の要素として重ねています。読み上げ名は「系列名 時点: 値」で、ホバーでもキーボードのフォーカスでも同じツールチップが出ます。資料は当たり判定の目安に 44px を挙げていますが、点が密なときに隣と重ならないことを優先しました。
  • 図の名前は、呼ぶ側が付けます。部品は外枠に role="img" を付けますが、aria-label の既定は持ちません。何の、いつの数字かという図の題は、部品には分からないからです。系列の区別も色だけで、点はすべて同じ丸です。資料が挙げる「実線と破線を使い分ける」「線の終わりに系列名を置く」は、いまは呼ぶ側の仕事として残っています。showLegend は既定で off で、on にすると各系列の最後の値が凡例に並びます。
    UIXHERO: 折れ線グラフ（Line Chart）

使用コンポーネント

折れ線チャートチャート凡例ツールチップ

関連コンポーネント

スパークラインリボンチャート棒グラフ