折れ線チャートLineChartExperimental
複数系列の時系列比較に使う線・面チャートです。
プレビュー
状態とバリエーション
線表示
時系列を直接比較する SSOT 登録済みの線バリエーションです。
1月2月3月4月5月6月
面表示と凡例
面の塗り、基準線、系列凡例を加えてダッシュボードで読みやすくします。
1月2月3月4月5月6月
売上74
目標78
点なし
個別の点より傾向線を優先したい場合はマーカーを非表示にします。
1月2月3月4月5月6月
範囲固定
複数チャートのスケールを揃えたい場合に縦軸の範囲を固定します。
1月2月3月4月5月6月
売上74
目標78
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| series | { label?: ReactNode; data: Array<number | { label?: ReactNode; value: number }>; color?: ChartColor }[] | - | チャート幅に沿って表示する系列と各点の値です。 |
| variant | "area" | "line" | "line" | 線表示と面表示を切り替える SSOT 登録済みバリエーションです。 |
| referenceValue | number | - | 任意の点線基準値です。 |
| showLegend | boolean | false | 系列のチャート凡例を表示します。 |
| showDots | boolean | true | 各データ点のマーカーを表示します。 |
使い方
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 }] },
];
<LineChart series={series} />
<LineChart series={series} variant="area" showLegend />
<LineChart series={series} referenceValue={50} referenceLabel="目標" showDots={false} />