Area Chart
fandhe-frontend-pre-styled-ui の area_chart mod が提供するスタイル済み Area Chart 部品です。
イシュー #2081 で shadcn/ui Charts（area、10 バリアント）と突合し、曲線（linear/natural/step）・積み上げ（none/normal/expand）・グラデーション塗り・軸/グリッドの静的バリアントを AreaChartProps の純追加で補完しました。マウス追従ツールチップ・期間切替・凡例トグルのような実行時インタラクションは対象外です。
Demo
系列ごとに折れ線 + 塗りつぶし面を重ねて描く自己完結チャートです。複数系列（chart-1〜6 の固定ローテーション色）・size（Xs〜Xl）に加え、shadcn/ui Charts（area）と突合した曲線（linear/natural/step）・積み上げ（normal/expand）・グラデーション塗り・軸/グリッドの各静的バリアントを掲示します（イシュー #2081）。マウス追従ツールチップ・期間切替等の実行時インタラクションは対象外です。
Size
Curve
Features
- 系列ごとに折れ線 + domain 下端へ閉じた塗りつぶし面を重ねて描く自己完結チャート
- 曲線（Linear/Natural/Step）・積み上げ（None/Normal/Expand）・塗り（Solid/Gradient）・軸/グリッドの静的バリアント（イシュー #2081、shadcn/ui Charts（area）突合）
- マウス追従ツールチップ等の実行時インタラクションは対象外（#2128）。期間切替（data-range）・凡例トグルの SSR 構造（range/hidden_series）は #2133 で追加済み、実データ連動は #2134
- size（Xs〜Xl）で表示高さを切り替える
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 の座標系寸法。 |
curve | AreaCurve | Linear | 曲線種（Linear/Natural/Step）。shadcn/ui chart-area-linear/-default（natural）/-step 相当。 |
stack | AreaStack | None | 積み上げ（None/Normal/Expand）。Expand は domain (0, 1) 固定・全系列の負値を拒否する。 |
fill | AreaFill | Solid | 塗り（Solid/Gradient）。shadcn/ui chart-area-gradient 相当。 |
gradient_id | &str | "fandhe-area" | fill: Gradient 時の <linearGradient id> 接頭辞。同一ページに複数チャートを置く場合は一意な値を指定する。 |
show_x_axis / show_y_axis / show_grid | bool | false | X 軸・Y 軸・水平グリッド線の描画有無。shadcn/ui chart-area-axes 相当。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
series-area | data-series | signups, visits |
series-line | data-series | signups, visits |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-area-chart-height | auto |
Examples
単一系列の面グラフ
3 カテゴリ 1 系列の面グラフを描画します。
積み上げ面グラフ
stack: AreaStack::Normal で 2 系列を積み上げます。
グラデーション塗り
fill: AreaFill::Gradient で縦方向グラデーション塗りにします。
軸・グリッド付き
show_x_axis/show_y_axis/show_grid で軸とグリッドを表示します。