チャート見本市/円・ドーナツグラフ
構成比・割合Pie & Donut Chart難易度: 簡単

円・ドーナツグラフ

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

「全体を100%としたときの内訳・シェア」の割合を把握する

全体の構成比率(シェア)を円の角度で表現します。中央をくり抜いたドーナツグラフは、中央に合計値や主要メッセージを記載できるためデザイン的にも人気があります。

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

EC売上比55.8%

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

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

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

1位シェア
最大構成要素
#FACC15HEX
2位シェア
次点要素
#60A5FAHEX
その他
残りの細かな要素
#3F3F46HEX

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

  • スマホ・PC・タブレットのアクセス端末比率
  • 決済方法の内訳(クレジットカード・PayPay・現金)
  • 顧客の年代別構成比

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

  • 構成要素が6個以上ある状態(角度の微妙な差が人間には判別不可能)
  • 合計が100%にならないデータを無理やり円グラフにする

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

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