単体グラフ
よく使うグラフのサンプル集です。各カードからデモページへ移動できます。
棒グラフ（Bar）
詳しく見る
単一系列の基本的な棒グラフです。
共通部品WC
- x/y軸・単位・色をCSS変数でカスタム
- ラベル表示のON/OFF（--chart-bar-label-display）
グループ化棒グラフ（GroupedBar）
詳しく見る
カテゴリごとに複数系列を並べて比較します。
共通部品WC
- 系列ごとに色分け
- 凡例・データラベル選択可
積み上げ棒グラフ（StackedBar）
詳しく見る
合計と内訳の比率を可視化します。
共通部品WC
- 総量・内訳の比較に最適
- 系列色は --chart-color1〜 で指定
横向き棒グラフ（HorizontalBar）
詳しく見る
横方向に値を比較します。
共通部品WC
- ラベルが長いカテゴリに最適
- ツールチップ・軸のスタイル調整
横向きグループ化棒グラフ（HorizontalGroupedBar）
詳しく見る
横並びで複数系列を比較します。
共通部品WC
- 系列比較 ＋ 長いラベル対応
- レスポンシブ表示
円グラフ（Pie）
詳しく見る
構成比を一目で把握できます。
共通部品WC
- 割合の可視化
- 中央ラベルや凡例
レーダーチャート（Radar）
詳しく見る
複数指標を同心円上で比較します。
共通部品WC
- 多次元の特徴比較
- 色カスタム対応