FREEブラウザで作成 · 無料 · 登録不要

ドーナツグラフ作成

中央に合計値を表示できるモダンな円グラフ。ダッシュボードやKPI表示に。

ブラウザ完結 PNG / SVG / CSV 出力 スマホ対応
プレビュー
長押しで画像保存
サンプルから始める
データを入力

1行目はヘッダー、2行目以降にデータ。

見た目を調整

ドーナツグラフとは

ドーナツグラフ(Doughnut Chart)は、円グラフの中央をくり抜いた形のグラフ。機能的には円グラフとほぼ同じですが、中央の余白に合計値や主要KPIを表示できるため、モダンな資料・ダッシュボードで好んで使われます。

円グラフとの違い

「構成比」を示すという点では同じ。中央に情報を置けるぶん、ドーナツの方が情報密度を高められます。

こんなときに使う

デバイス比率(PC/Mobile)
アクセス解析ダッシュボードの定番表示。
ユーザー年代構成
マーケティング資料で読者層を示す。
流入チャネル別の割合
検索・SNS・広告などの寄与度を可視化。
KPIの達成度
中央に達成率%を置いて進捗を表現。

作り方のコツ

1. 中央の余白を活かす

合計値・主要指標・タイトルを中央に置くことで、情報量を増やせます。

2. 項目数は円グラフ同様に5つまでに絞る

扇形が細くなりすぎると読めなくなります。Top5以外は「その他」にまとめてください。

3. 太さ(cutout)を調整する

ドーナツを細くするとモダンで洗練された印象に、太くすると円グラフに近く情報を強調した印象になります。

4. ベースカラーを決める

1系列に同系色のグラデーションを使うと統一感が出ます(例:ブルーの濃淡)。対比させたいときは、補色を使い分けてください。

よくある質問

データ表現としては同じです。モダンな印象が欲しい・中央に情報を入れたいならドーナツ、シンプルで伝統的な見た目なら円グラフを選びましょう。
はい、「見た目を調整」の「中央のテキスト」欄に表示したい文字(例:合計、ブランド名、KPIラベル)を入れると、中央に大きく表示されます。空欄なら自動で合計値が入ります。
現在は単一リングのみ対応。複数リングは将来追加を検討中です。
はい。入力した値が絶対値でも、グラフ上では合計を100%として割合が計算されます。

関連するグラフ