cdnで簡単導入！chartjsとplugin datalabelsの使い方解説

2025 11/29

2025/11/29

はじめに

概要

本ドキュメントは、Chart.jsをCDN経由で読み込み、chartjs-plugin-datalabels（以下、Datalabels）を統合してチャート上にデータラベルを表示する手順と使い方を丁寧に解説します。実際のコード例を用い、初めての方でも実装できるように進めます。

対象読者

ウェブページにグラフを表示したい開発者やデザイナー
JavaScriptの基礎（変数や関数）が分かる方

本書で学べること

CDNでの読み込み方法と基本設定
Chart.jsとDatalabelsの統合手順
ラベルの見た目や表示条件の調整方法
円グラフでのパーセンテージ表示やインタラクティブな機能の追加例

前提と準備

ブラウザとテキストエディタがあれば始められます。特別なビルドツールは不要で、CDNを利用するためローカルにライブラリをインストールする必要はありません。

進め方

第2章から順に読み進めると理解しやすい構成です。まずは基本を抑え、第4章で手を動かす実装に取り組んでください。必要ならコードをコピペして動作を確認してください。

Chart.jsとDatalabelsプラグインの概要

Chart.jsとは

Chart.jsはブラウザ上で使う軽量なグラフ描画ライブラリです。HTMLのcanvas要素を使い、折れ線・棒・円などのグラフをシンプルな設定で描けます。マウスホバーやアニメーションなどの基本的なインタラクションを持ち、見た目を整えやすい点が魅力です。

Datalabelsプラグインとは

chartjs-plugin-datalabelsは、グラフの各データポイントに直接ラベルを表示するためのプラグインです。値やパーセンテージを各要素の上に出せるため、グラフの読み取りが速くなります。表示位置や色、フォントなどを細かく設定できます。

使うメリットと場面

円グラフで割合を見せたいときに有効です。
棒グラフで各棒の値を明示して比較を助けます。
小さなダッシュボードやレポートで視認性を高めます。

注意点

表示ラベルが多いと重なりや視認性低下が起きます。データ数が多い場合は表示を絞るか、配置やフォントを調整してください。最近のChart.jsではプラグインの登録が必要ですので読み込み順に注意します。

CDNを使用したChart.jsとプラグインの読み込み方法

はじめに

CDNを使うとサーバーにファイルを置かず、ブラウザから直接ライブラリを読み込めます。手早く試作や共有をする際に便利です。以下ではChart.js本体とchartjs-plugin-datalabelsの読み込み方法を具体例で示します。

読み込み順と理由

必ずChart.js本体を先に読み込み、その後にプラグインを読み込んでください。プラグインはChart.jsに依存するため、順序が逆だと動作しません。

スクリプトタグの例

内に置く例（同期読み込み）:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

末尾に置く例（レンダリング後に読み込む）:

<!-- canvasなどの要素を先に記述 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

defer属性を使うとHTMLの解析を妨げずに読み込めます。

### バージョンと互換性
Chart.jsはメジャーバージョンごとに仕様が変わります。Chart.js 3系に対応するプラグインを使ってください。バージョンを固定すると将来の互換性問題を避けられます。

### 注意点
– オフラインでは読み込めません。ローカル配布を検討してください。
– CSP（コンテンツセキュリティポリシー）が設定されている場合、CDNの許可が必要です。
– 必要ならintegrityやcrossorigin属性を追加してセキュリティを強化してください。

## 基本的なチャート実装とプラグインの統合

### 準備
Chart.jsとDatalabelsプラグインを読み込んでください。CDNで読み込んでいる場合はプラグインが自動登録されます。モジュールで使う場合は Chart.register(ChartDataLabels) が必要です。

### HTML: canvas を用意

<canvas id="myChart" width="400" height="200"></canvas>

### JavaScript: データと基本設定（棒グラフの例）

const ctx = document.getElementById('myChart').getContext('2d');
const data = {
  labels: ['1月','2月','3月','4月'],
  datasets: [{
    label: '売上',
    data: [120, 150, 100, 170],
    backgroundColor: 'rgba(54,162,235,0.6)'
  }]
};
const config = {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      legend: { display: true },
      datalabels: {
        color: '#fff',
        anchor: 'end',
        align: 'start',
        formatter: (value) => value + '件'
      }
    }
  }
};
new Chart(ctx, config);

### Datalabels の統合ポイント
datalabelsの設定は options.plugins.datalabels に書きます。color, anchor, align, formatter などで表示位置や内容を調整します。formatterは関数で値を加工できるため、単位を付けたり四捨五入したりできます。

### 実行上の注意
– プラグイン未登録のエラーが出たら、モジュール版では Chart.register(ChartDataLabels) を追加してください。
– 表示が重なる場合は anchor や align、offset を調整してください。

この章では基本的な組み合わせ方を示しました。次章で細かい見た目の調整を解説します。

## Datalabelsプラグインの詳細設定とカスタマイズ

### 概要
chartjs-plugin-datalabelsはデータラベルを細かく制御できます。色やフォント、位置、表示形式を個別に設定できるため、見やすさを高める目的で便利です。

### 基本設定例
– color: ラベル色を指定します。関数で値に応じて色を変えることもできます。
– font: sizeやweightでサイズや太さを指定します。
– align/anchor: ラベルの位置（例: ‘end’,’start’,’center’）を決めます。

### formatterで表示を変える
formatterに関数を渡して表示を自由に変更します。例: パーセンテージ表示、通貨記号の付与、桁区切りや単位の追加が可能です。小さい値を非表示にするなど条件判定も行えます。

### 配置と重なり対策
重なる場合はoffsetでずらす、alignを変更する、またはdisplay関数で重なり時にラベルを非表示にするなど対処します。ラベル数が多いときはフォントサイズを下げるのも有効です。

### 実例（簡単なformatter）

plugins: {
  datalabels: {
    color: ctx => ctx.dataset.backgroundColor[ctx.dataIndex] > 128 ? '#fff' : '#000',
    font: {size:12, weight:'600'},
    formatter: (value, ctx) => `${value.toLocaleString()}円`,
    anchor:'end', align:'start'
  }
}

### 補足
複数行表示は\nで改行できます。必要に応じてラベルごとに個別設定も可能です。

## 円グラフでの実装例（パーセンテージと値の表示）

### 概要
円グラフで「割合（%）＋値」を同時に表示する実装例を示します。formatter関数で合計を計算し、改行（\n）でパーセンテージと値を分けます。プラグインはplugins配列にChartDataLabelsを指定して登録します。

### サンプルコード

const data = [10, 30, 60];
const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'pie',
  data: { labels: ['A','B','C'], datasets: [{ data }] },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          const sum = ctx.chart.data.datasets[0].data.reduce((a,b)=>a+b,0);
          const pct = (value / sum * 100).toFixed(1) + '%';
          return pct + '\n' + value;
        },
        color: '#fff',
        font: { weight: 'bold', size: 12 },
        anchor: 'center',
        align: 'center'
      }
    }
  },
  plugins: [ChartDataLabels]
});

### ポイント解説
– formatter内で合計を計算して正確な割合を出します。ゼロや小数の扱いはtoFixedで調整します。
– anchor/alignで表示位置を調整できます。ラベルが塊の外に欲しい場合はanchor:’end’, align:’start’を試してください。
– 見やすさのため背景色に応じてcolorやfontを切り替えると良いです。

## インタラクティブ機能の追加

### クリックでデータを取得する
Chart.jsではonClickを使って、クリックした要素のラベルや値を取得できます。要素が存在するか確認してからアクセスする点に注意してください。

const myChart = new Chart(ctx, {
  type: 'pie',
  data: { labels: ['A','B','C'], datasets:[{ data:[10,20,30]}] },
  options: {
    onClick(evt, elements) {
      if (!elements.length) return;
      const el = elements[0];
      const idx = el.index;
      const ds = el.datasetIndex;
      const label = this.data.labels[idx];
      const value = this.data.datasets[ds].data[idx];
      alert(`${label}: ${value}`);
    }
  }
});

### ツールチップとホバーの改善
ツールチップのcallbacksで表示内容を制御できます。ホバー時の強調はpointStyleやhoverOffsetなどで調整します。

### データの表示/非表示切替
凡例クリックの挙動をカスタマイズし、特定データの表示切替や外部ボタンでの制御が可能です。ChartインスタンスのsetDatasetVisibilityやtoggleDataVisibilityを使います。

### カスタムプラグインでの拡張
プラグインでクリック時に詳細パネルを更新したり、選択状態を描画できます。簡単な例としてafterEventフックでイベントを処理し、DOMを更新する方法がおすすめです。

実装はシンプルにして、まずはonClickやtooltipのcallbacksから試すと学びやすいです。