Bar Chart

fandhe-frontend-pre-styled-ui の charts（内包）mod が提供するスタイル済み Bar Chart 部品です。

Demo

ChartData（複数系列）+ LinearScale + SVG ノード木生成ヘルパーのみで組み立てる、外部依存ゼロのグループ棒グラフです。orientation で縦/横を切り替えます。イシュー #2082 で shadcn/ui Charts（bar）と突合し、角丸・値ラベル・積み上げ・強調表示・正負色分け・軸/グリッドの静的バリアントを追加しました。マウス追従ツールチップ・凡例トグル等の実行時インタラクションは別イシュー（#2086/#2132）のスコープです。

Vertical

Horizontal

Axes

Labeled

Inside label

Mixed

Stacked

Series

Stacked 100%

Active

Negative

Features

ChartData（複数系列）+ LinearScale + SVG ノード木生成ヘルパーのみで組み立てるグループ棒グラフ
orientation（vertical/horizontal）で棒の向きを切り替える
軸線・グリッド・凡例・ツールチップは charts（共通 API）側の別部品

Anatomy

root
  bar
  category-label
  value-label
  inside-label

API Reference

Arguments

Name	Type	Default	Description
`orientation`	`Orientation`	`Vertical`	カテゴリ軸の向き（vertical: 棒が縦に伸びる / horizontal: 棒が横に伸びる）。
`width`	`f64`	`480.0`	viewBox の幅（px 相当）。
`height`	`f64`	`300.0`	viewBox の高さ（px 相当）。

Data Attributes

Part	Attribute	Observed Values
`bar`	`data-active`	（値なし）
`bar`	`data-index`	`0`, `1`, `2`, `3`
`bar`	`data-negative`	（値なし）
`bar`	`data-series`	`net change`, `signups`, `visits`
`inside-label`	`data-index`	`0`, `1`, `2`, `3`
`inside-label`	`data-series`	`visits`
`value-label`	`data-index`	`0`, `1`, `2`, `3`
`value-label`	`data-series`	`visits`

Examples

縦/横 orientation

同じデータを vertical/horizontal で描画します。