Chart.jsで棒グラフを作るかんたんな使い方【コピペOK】

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: 100%; height: 300px;">
  <canvas id="myChart" role="img" aria-label="グラフの説明">テキストでのデータ説明</canvas>
</div>

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

<canvas> を <div> で囲んで高さを指定するのがポイントです。<canvas> 自体にCSSで高さを指定すると崩れることがあるため、ラッパー側で高さを管理します。

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

棒グラフのサンプルコード

（万円）

2020年〜2024年の売上推移棒グラフ

<figure class="chart-wrapper">
  <figcaption class="chart-caption" style="position:relative;">
    <span class="chart-label fz-xs" style="position:absolute; top:0.8rem; left:1rem;">（万円）</span>
    <h4 class="chart-title fz-md ta-center">2020年〜2024年の売上推移棒グラフ</h4>
  </figcaption>

  <!-- グラフ本体 -->
  <div class="chart-content" style="position:relative; width:100%; height:300px;">
    <canvas id="js-chartCKNB" role="img" aria-label="2020年〜2024年の売上推移棒グラフ"></canvas>
  </div>
</figure><!-- ///.chart -->

<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
  (function () {
    //棒の上に数値を表示する
    const labelPlugin = [{
      afterDraw(chart) {
        const ctx = chart.ctx;
        chart.data.datasets[0].data.forEach((val, i) => {
          const bar = chart.getDatasetMeta(0).data[i];
          ctx.save();
          ctx.fillStyle = '#444';
          ctx.font = '12px sans-serif';
          ctx.textAlign = 'center';
          ctx.fillText(val.toLocaleString(), bar.x, bar.y - 6);
          ctx.restore();
        });
      }
    }];

    new Chart(document.getElementById('js-chartCKNB'), {
      type: 'bar',
      data: {
        labels: ['2020年', '2021年', '2022年', '2023年', '2024年'],
        datasets: [
          {
            label: '自社商品売上',
            data: [1820, 1950, 2100, 2280, 2410],
            backgroundColor: '#005B92',
            barPercentage: 0.5,
            categoryPercentage: 0.6
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        devicePixelRatio: window.devicePixelRatio || 2,
        plugins: {
          legend: { display: false },   // ← デフォルト凡例を非表示
        },
        scales: {
          x: {
            ticks: {
              font: { size: 13 },
              color: '#1F2023',
              maxRotation: 0
            },
            grid: { display: false }    // ← 縦線を非表示
          },
          y: {
            min: 0,
            max: 2500,
            ticks: {
              stepSize: 500,
              callback: v => v === 2500 ? '' : v.toLocaleString() + '万'         // ← 一番上のラベルを非表示
            },
            grid: {
              color: ctx => ctx.tick.value === 2500 ? 'transparent' : '#e8e8e8'  // ← 一番上のグリッドを非表示
            }
          }
        }
      },
      plugins: labelPlugin  // ← 棒の上に数値を表示する
    });
  })();
</script>

type: 'bar' を指定するだけで縦棒グラフになります。横棒グラフにしたい場合は type: 'bar' のまま indexAxis: 'y' をoptionsに追加します。

よく使うカスタマイズ

棒の色を変える

backgroundColor で色を指定します。特定の棒だけ色を変えたい場合は配列で指定します。

datasets: [
  {
    data: [1820, 1950, 2100, 2280, 2410],

    // 全部同じ色
    backgroundColor: '#005B92',

    // 棒ごとに個別指定（最後だけ薄くする例）
    backgroundColor: ['#005B92', '#005B92', '#005B92', '#005B92', '#80A5C2']
  }
]

棒の幅を調整する

デフォルトでは棒がやや太めに表示されます。barPercentage と categoryPercentage の2つで調整します。

datasets: [
  {
    data: [...],
    barPercentage: 0.5,      // カテゴリ内の棒の幅（0〜1）
    categoryPercentage: 0.6  // カテゴリ全体に対する占有率（0〜1）
  }
]

barPercentage	categoryPercentage	見た目
0.8	0.8	デフォルト（太め）
0.5	0.6	中細
0.3	0.5	細め

軸に単位を付ける

ticks.callback で軸ラベルに単位を追加できます。toLocaleString() でカンマ区切りにもなります。

scales: {
  y: {
    ticks: {
      callback: v => v.toLocaleString() + '万'
      // 例：2000 → "2,000万"
    }
  }
}

縦線（グリッド）を非表示にする

X軸のグリッド線は見た目がうるさくなりがちです。grid.display: false で非表示にできます。

scales: {
  x: {
    grid: { display: false }
  }
}

Y軸の最大値ラベルとグリッド線だけ消したい場合は callback と color を組み合わせます。

scales: {
  y: {
    min: 0,
    max: 2500,
    ticks: {
      callback: v => v === 2500 ? '' : v.toLocaleString() + '万'
    },
    grid: {
      color: ctx => ctx.tick.value === 2500 ? 'transparent' : '#e8e8e8'
    }
  }
}

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

ホバー時に表示されるツールチップの文字列を変えるには tooltip.callbacks.label を使います。

plugins: {
  tooltip: {
    callbacks: {
      label: ctx => `${ctx.dataset.label}: ${ctx.parsed.y.toLocaleString()}万円`
    }
  }
}

棒の上に数値を表示する

Chart.js標準では棒の上に数値を出す機能がないため、plugins にカスタム描画を追加します。

const labelPlugin = [{
  afterDraw(chart) {
    const ctx = chart.ctx;
    chart.data.datasets[0].data.forEach((val, i) => {
      const bar = chart.getDatasetMeta(0).data[i];
      ctx.save();
      ctx.fillStyle = '#444';
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(val.toLocaleString(), bar.x, bar.y - 6);
      ctx.restore();
    });
  }
}];

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: { ... },
  options: { ... },
  plugins: labelPlugin  // ← ここで渡す
});

デフォルト凡例を非表示にする

複数系列のときにChart.jsが自動で出す凡例は legend.display: false で非表示にして、HTMLで自作するとデザインの自由度が上がります。

plugins: {
  legend: { display: false }
}

<!-- HTML凡例の例 -->
<div style="display: flex; gap: 16px; font-size: 12px; margin-bottom: 8px;">
  <span style="display: flex; align-items: center; gap: 5px;">
    <span style="width: 10px; height: 10px; background: #005B92; border-radius: 2px; display: inline-block;"></span>
    自社商品売上
  </span>
</div>

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

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

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

まとめ

Chart.jsで棒グラフを作るときのポイントをまとめます。

type: 'bar' で縦棒、indexAxis: 'y' を追加すると横棒
棒の色は backgroundColor で指定、配列にすると棒ごとに個別指定できる
棒の太さは barPercentage と categoryPercentage で調整
軸ラベルは ticks.callback で単位付きにできる
棒の上の数値は labelPlugin でカスタム描画する
高DPIディスプレイのぼやけには devicePixelRatio を設定

CODE PLUS

スマホとPCで別々のスタイルを適用するJavaScript -JavaScriptのパフォーマンス最適化-

Webパフォーマンス改善：PageSpeed Insightsスコアを大幅に改善できた5つの施策

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

WordPressカスタムメニューをアコーディオンにするJavaScript【クリック/ホバー両対応】

PCはタブパネル切り替え・SPはアンカーリンク——JavaScriptで実現するハイブリッドUIの実装解説

contrast-color()を設定できるJavaScriptを作ってみた｜背景色から文字色を自動判定

Chart.jsで積み上げ棒グラフを作るかんたんな使い方【コピペOK】

Chart.jsで棒グラフを作るかんたんな使い方【コピペOK】

Chart.jsで棒グラフを作るかんたんな使い方【コピペOK】

CDNで読み込む

基本の構造

棒グラフのサンプルコード

2020年〜2024年の売上推移棒グラフ

よく使うカスタマイズ

棒の色を変える

棒の幅を調整する

軸に単位を付ける

縦線（グリッド）を非表示にする

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

棒の上に数値を表示する

デフォルト凡例を非表示にする

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

まとめ

関連記事

Claude Codeにレイアウトを正確に再現させる「中間設計書」記法

unpkg.com の使い方 / npm にパッケージを公開してCDN配信する方…