チャート見本市/棒グラフ(比較)
比較・差分Bar / Column Chart難易度: 簡単

棒グラフ(比較)

一言でわかる可視化ポイント

「どこが抜きんでているか」「どれが一番小さいか」の大小をズバッと比較する

項目ごとの数値を長さ・高さで表現します。人間は「線の長さの差」を最も直感的に把握できるため、売上No.1店舗や人気商品順位の比較に最適です。

インタラクティブプレビュー

東京
大阪
No.1 名古屋
福岡

※マウスホバーやクリックでアニメーションや数値の変化を確認できます。

おすすめHTML/CSSカラーパレットサンプル

ダッシュボードの視認性を高めるためのカラーコード例です。グラフで最も伝えたい要素にイエローなどのアクセントカラーを割り当て、比較対象にはダークカラーを使用します。

通常バー
基本項目
#3F3F46HEX
1位・ハイライト
注目させる1番手
#FACC15HEX
ワースト・注意
目標未達の項目
#EF4444HEX

こんな可視化に向いている(GOOD)

  • 全10店舗の当月売上ランキング比較
  • 商品カテゴリ別の販売数量比較
  • 部署ごとの残業時間比較

やってはいけないNGパターン(BAD)

  • 縦軸(Y軸)のスタート位置を0以外にして差を過剰に誇張すること
  • 項目が50個以上あり横幅に収まりきらない状態

標準機能で対応しているおすすめBIツール

Looker StudioPower BIMetabaseRedash
Looker StudioからRetoolまで!BIツール比較ガイドを読む