折れ線チャート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 | 各データ点のマーカーを表示します。 |
使い方
Loading...