Area Chart
fandhe-frontend-pre-styled-ui の area_chart mod が提供するスタイル済み Area Chart 部品です。
Demo
系列ごとに折れ線 + 塗りつぶし面を重ねて描く自己完結チャートです。積み上げ・曲線補間は別イシュー(#847 以降)のスコープです。
Features
- 系列ごとに折れ線 + domain 下端へ閉じた塗りつぶし面を重ねて描く自己完結チャート
- 積み上げ・曲線補間は charts 共通 API 側の別イシュー
Anatomy
root
plot
series-area
series-lineAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| data | &ChartData | (必須) | 描画する系列データ。 |
| aria_label | &str | (必須) | svg 要素の aria-label(データ可視化のため必須引数)。 |
| size | Size | Md | root の CSS 表示高さを切替える寸法 variant。 |
| width / height | f64 | 300.0 / 150.0 | viewBox の座標系寸法。 |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-area-chart-height | auto |
Examples
単一系列の面グラフ
3 カテゴリ 1 系列の面グラフを描画します。