Chart.jsは、HTMLの <canvas> 要素を使ってグラフを描画するJavaScriptライブラリです。

Canvasベースなので軽量かつ高パフォーマンスで、棒グラフ・折れ線・円グラフなど8種類のグラフを手軽に実装できます。MITライセンスで商用利用も無料です。

この記事ではドーナツグラフ・円グラフに絞って、すぐ使えるコードを解説します。棒グラフや積み上げ棒グラフについては別記事で解説しています。

    CDNで読み込む

    インストール不要で、HTMLに1行追加するだけで使えます。

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    フッターで読み込む場合は foot.php などに追記するだけでOKです。

    バージョンを固定したい場合は https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js のようにバージョン番号を指定します。本番サイトでは予期しないアップデートを避けるためバージョン固定が安心です。

    基本の構造

    グラフを表示するには <canvas> 要素と new Chart() の2つだけ必要です。

    <div style="position:relative; width:300px;">
  <canvas id="myChart" role="img" aria-label="グラフの説明">テキストでのデータ説明</canvas>
</div>

<script>
new Chart(document.getElementById('myChart'), {
  type: 'doughnut',  // ドーナツグラフ
  data: { ... },     // データ
  options: { ... }   // オプション
});
</script>

    棒グラフと違い、<canvas> のラッパーには width と height を同じ値にして正方形にするのが基本です。

    role="img" と aria-label はスクリーンリーダー対応のために必ず設定します。

    ドーナツグラフのサンプルコード

    以下は架空のECサイトの売上構成比を表示するサンプルです。

    売上構成比の円グラフ

    ■ 自社商品　42.5% 
    ■ マーケットプレイス　51.2% 
    ■ その他　6.3%
    自社商品42.5%、マーケットプレイス51.2%、その他6.3%

    （2024年度）

    <!-- 売上構成比の円グラフ -->
<figure class="chart-wrapper fx-center fx-wrap gx-2r p-1.5r bd-bounds" style="padding-right:5%;">
  <!-- 凡例（HTMLで自作） -->
  <figcaption class="chart-caption">
    <h4 class="chart-title fz-md mb-2r">売上構成比の円グラフ</h4>
    <span><i style="color:#005B92;">■</i>&nbsp;自社商品　42.5%</span>&ensp;<br />
    <span><i style="color:#79ADCC;">■</i>&nbsp;マーケットプレイス　51.2%</span>&ensp;<br />
    <span><i style="color:#B2B2B3;">■</i>&nbsp;その他　6.3%</span>
  </figcaption>

  <!-- グラフ本体 -->
  <div class="chart-content ta-center" style="position:relative; width:300px;">
    <canvas id="js-ChartCKQC" role="img" aria-label="売上構成比の円グラフ（2024年度）">自社商品42.5%、マーケットプレイス51.2%、その他6.3%</canvas>
    <p class="fz-xs c-text-500 mt-0.5r">（2024年度）</p>
  </div>
</figure>

<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
  (function () {
    new Chart(document.getElementById('js-ChartCKQC'), {
      type: 'doughnut',
      data: {
        labels: ['自社商品', 'マーケットプレイス', 'その他'],
        datasets: [{
          data: [42.5, 51.2, 6.3],
          backgroundColor: ['#005B92', '#79ADCC', '#B2B2B3'],
          borderWidth: 2,
          borderColor: '#fff'
        }]
      },
      options: {
        responsive: false,
        devicePixelRatio: window.devicePixelRatio || 2,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => `${ctx.label}：${ctx.parsed}%`
            }
          }
        }
      }
    });
  })();
</script>

    よく使うカスタマイズ

    ドーナツグラフと円グラフを切り替える

    type を変えるだけで切り替えられます。

    type: 'doughnut'  // ドーナツグラフ（中央に穴あり）
type: 'pie'       // 円グラフ（穴なし）

    どちらも data と options の書き方は同じです。用途に合わせて使い分けます。

    グラフのサイズを変える

    固定サイズにする場合は responsive: false にして、ラッパーの width と height で指定します。

    <div style="position: relative; width:320px; height:320px; margin: 0 auto;">
  <canvas id="myChart"></canvas>
</div>

<script>
new Chart(document.getElementById('myChart'), {
  options: {
    responsive: false,
    ...
  }
});
</script>

    レスポンシブにする場合は responsive: true にして、ラッパーを width:100% にします。正円を保つために max-width で最大幅を制限するのがポイントです。

    <div style="position: relative; width:100%; max-width:320px; aspect-ratio: 1; margin: 0 auto;">
  <canvas id="myChart"></canvas>
</div>

<script>
new Chart(document.getElementById('myChart'), {
  options: {
    responsive: true,
    maintainAspectRatio: false,
    ...
  }
});
</script>

    色を変える

    backgroundColor を配列で指定します。データの順番と対応しています。

    datasets: [{
  data: [42.5, 51.2, 6.3],
  backgroundColor: [
    '#005B92',  // 1つ目のデータの色
    '#79ADCC',  // 2つ目のデータの色
    '#B2B2B3'   // 3つ目のデータの色
  ]
}]

    隣り合うセクションの境界線の色と幅は borderColor と borderWidth で調整します。

    datasets: [{
  ...
  borderWidth: 2,       // 境界線の幅（0にすると境界線なし）
  borderColor: '#fff'   // 境界線の色
}]

    デフォルト凡例を非表示にしてHTMLで代替する

    Chart.jsのデフォルト凡例は丸アイコンで見た目がいまいちです。legend.display: false で非表示にして、HTMLで自作する方がデザインの自由度が上がります。

    plugins: {
  legend: { display:false }
}
    <!-- HTML凡例の例 -->
<div style="font-size:12px; margin-bottom:12px;">
  <span style="display:inline-flex; align-items:center; gap:4px;">
    <span style="width:10px; height:10px; background:#005B92; display:inline-block;"></span>
    自社商品　42.5%
  </span>&ensp;
  <span style="display:inline-flex; align-items:center; gap:4px;">
    <span style="width:10px; height:10px; background:#79ADCC;  display:inline-block;"></span>
    マーケットプレイス　51.2%
  </span>
</div>

    凡例に割合を含めておくと、ツールチップに頼らなくても数値がひと目でわかります。

    ツールチップをカスタマイズする

    tooltip.callbacks.label でホバー時に表示されるテキストを変更できます。

    plugins: {
  tooltip: {
    callbacks: {
      label: ctx => ${ctx.label}：${ctx.parsed}%
      // 例：「自社商品：42.5%」と表示される
    }
  }
}

    ぼやけを防ぐ（高DPIディスプレイ対応）

    Retinaディスプレイなど高解像度の画面でグラフがぼやけて見える場合は devicePixelRatio を明示します。

    options: {
  devicePixelRatio: window.devicePixelRatio || 2,
  ...
}

    まとめ

    Chart.jsでドーナツグラフ・円グラフを作るときのポイントをまとめます。

    • type: 'doughnut' でドーナツグラフ、type: 'pie' で円グラフ（データ・オプションの書き方は同じ）
    • 色は backgroundColor に配列で指定し、データの順番と対応させる
    • 固定サイズは responsive: false ＋ ラッパーの width/height で指定
    • レスポンシブにする場合は responsive: true ＋ max-width ＋ aspect-ratio: 1 で正円を保つ
    • 凡例はデフォルトを非表示にしてHTMLで自作すると割合も一緒に表示できる
    • 高DPIディスプレイのぼやけには devicePixelRatio を設定