メニュー

単体グラフ

よく使うグラフのサンプル集です。各カードからデモページへ移動できます。

棒グラフ(Bar)

詳しく見る
棒グラフ(Bar)

単一系列の基本的な棒グラフです。

共通部品WC
  • x/y軸・単位・色をCSS変数でカスタム
  • ラベル表示のON/OFF(--chart-bar-label-display)

グループ化棒グラフ(GroupedBar)

詳しく見る
グループ化棒グラフ(GroupedBar)

カテゴリごとに複数系列を並べて比較します。

共通部品WC
  • 系列ごとに色分け
  • 凡例・データラベル選択可

積み上げ棒グラフ(StackedBar)

詳しく見る
積み上げ棒グラフ(StackedBar)

合計と内訳の比率を可視化します。

共通部品WC
  • 総量・内訳の比較に最適
  • 系列色は --chart-color1〜 で指定

横向き棒グラフ(HorizontalBar)

詳しく見る
横向き棒グラフ(HorizontalBar)

横方向に値を比較します。

共通部品WC
  • ラベルが長いカテゴリに最適
  • ツールチップ・軸のスタイル調整

横向きグループ化棒グラフ(HorizontalGroupedBar)

詳しく見る
横向きグループ化棒グラフ(HorizontalGroupedBar)

横並びで複数系列を比較します。

共通部品WC
  • 系列比較 + 長いラベル対応
  • レスポンシブ表示

円グラフ(Pie)

詳しく見る
円グラフ(Pie)

構成比を一目で把握できます。

共通部品WC
  • 割合の可視化
  • 中央ラベルや凡例

レーダーチャート(Radar)

詳しく見る
レーダーチャート(Radar)

複数指標を同心円上で比較します。

共通部品WC
  • 多次元の特徴比較
  • 色カスタム対応