Line Chart

fandhe-frontend-pre-styled-ui の line_chart mod が提供するスタイル済み Line Chart 部品です。

イシュー #2083 で shadcn/ui Charts（line、10 バリアント）と突合し、曲線（linear/natural/step）・データ点（none/filled/hollow）・値/カテゴリラベル・軸/グリッドの静的バリアントを LineChartProps の純追加で補完しました。マウス追従ツールチップ・hover 強調・期間切替・凡例トグルのような実行時インタラクションは対象外（#2128/#2132）です。

Demo

charts 基盤（座標スケーリング・SVG ノード木生成）を使った折れ線チャートです。複数系列（chart-1〜6 の固定ローテーション色）と size（Xs〜Xl）の段階に加え、曲線種・データ点・値/カテゴリラベル・軸/グリッドの静的バリアント（イシュー #2083、shadcn/ui Charts（line）突合）を掲示します。マウス追従ツールチップ・hover 強調・期間切替・凡例トグルは別イシュー（#2128/#2132）のスコープです。

Size

Curve

Features

charts 基盤（座標スケーリング・SVG ノード木生成）を使った折れ線チャート
系列色は charts::series_color_var(index) の固定色循環（color-palette 軸は非提供）
曲線（Linear/Natural/Step）・データ点（None/Filled/Hollow）・値/カテゴリラベル・軸/グリッドの静的バリアント（イシュー #2083、shadcn/ui Charts（line）突合）
マウス追従ツールチップ・hover 強調（active 拡張・非 active 減光）の CSS 語彙は #2131 で追加済みだが、wasm-full 側の実際の付け外し配線（#2130 は data-active/hidden のみ実装し、data-has-active の付け外しは未実装）は後続イシューへの引き継ぎ。期間切替（data-range）・凡例トグルの SSR 構造（range/hidden_series）は #2133 で追加済み、実データ連動は #2134
積み上げ・横向きは shadcn/ui line registry に存在しないため非対応
size（Xs〜Xl）で表示高さを切り替える

Anatomy

root
  plot
    series-line
    point
    value-label

API 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`	`charts::Curve`	`Linear`	曲線種（Linear/Natural/Step）。shadcn/ui `chart-line-linear`/`-default`（natural）/`-step` 相当。area_chart と共有する値型。
`dots`	`LineDots`	`None`	データ点マーカー（None/Filled/Hollow）。shadcn/ui `chart-line-dots`/`-dots-custom` 相当。
`label`	`LineLabel`	`None`	値/カテゴリラベル（None/Value/Category）。shadcn/ui `chart-line-label`/`-label-custom` 相当。
`color_by_category`	`bool`	`false`	データ点の色をカテゴリ index で chart-1〜6 循環へ切り替える。shadcn/ui `chart-line-dots-colors` 相当。
`show_x_axis / show_y_axis / show_grid`	`bool`	`false`	X 軸・Y 軸・水平グリッド線の描画有無。area_chart と同じ余白規則を共有する。

Data Attributes

Part	Attribute	Observed Values
`point`	`data-index`	`0`, `1`, `2`
`point`	`data-series`	`signups`, `visits`
`series-line`	`data-series`	`signups`, `visits`
`value-label`	`data-index`	`0`, `1`, `2`
`value-label`	`data-series`	`signups`, `visits`

CSS Variables

Variable	Default
`--fandhe-line-chart-height`	`auto`

Examples

単一系列の折れ線

3 カテゴリ 1 系列の折れ線を描画します。

曲線 + データ点

curve: Curve::Natural + dots: LineDots::Filled で自然スプライン曲線とデータ点を表示します。

値ラベル

label: LineLabel::Value で各データ点の上に値を表示します。

軸・グリッド付き

show_x_axis/show_y_axis/show_grid で軸とグリッドを表示します。