2026.10.21 開発

Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け

Q: Chart.jsは商用のWebサービスでも無料で使えますか？

使えます。Chart.jsはMITライセンスで、npm registryの4.5.1のメタデータでも MIT と記載されています。商用サービスへの組み込みや改変も認められており、条件は著作権表示とライセンス文をソフトウェアに含めることです。バンドラで1ファイルにまとめる場合も、ライセンスコメントを消さない設定にしておくと監査で慌てずに済みます。有償の商用ライセンスが必要になるHighchartsとは扱いが異なる点に注意してください。

Q: ReactやVueでChart.jsを使うにはどうすればよいですか？

Reactは react-chartjs-2 、Vueは vue-chartjs を使うのが一般的です。2026年10月21日時点の最新版はそれぞれ5.3.1と5.3.4で、どちらも chart.js の4.1.1以上を前提にしています。ラッパーを使っても、使う部品を Chart.register で登録する手順は変わりません。登録を共通モジュールに1回だけ書いておくと、画面ごとの書き漏れを防げます。

Q: Chart.jsで描ける点数に上限はありますか？

ライブラリとしての固定の上限はありません。実際の限界を決める条件は端末性能と設定です。折れ線で parsing: false と間引きを有効にすれば、canvas幅の4倍を超えた点は描画前に減らされます。間引きの条件を満たさない棒グラフや category 軸の折れ線では、点数がそのまま描画負荷になります。この場合は、サーバー側で日次や時間単位に集計してから渡すのが確実です。

Q: Chart.js 2系・3系の記事のコードは4系でそのまま動きますか？

そのままでは動かない箇所があります。2系の xAxes 配列による軸指定は3系で廃止され、4系では軸設定の grid.drawBorder が border.display へ改名されました。ファイル名も chart.min.js から chart.umd.min.js に変わっています。2020年以前の入門記事のコードを流用するときは、v4移行ガイドの変更点と照らし合わせてください。

Chart.jsとは？v4.5の導入コードと大量データの限界・他ライブラリとの選び分け

Chart.jsは、HTMLのcanvas要素へ折れ線・棒・円などのグラフを描画するJavaScriptライブラリで、MITライセンスで配布されています。2026年10月21日にnpm registryで確認した最新版は4.5.1（2025年10月13日公開）でした。この記事では、4.5系の配布形態とファイルサイズの実測値、npmで入れて必要な部品だけを登録する導入コード、数千点を超える時系列データで画面を固めないための設定、導入後に詰まりやすい箇所、そしてRecharts・ECharts・D3.js・BIツールとの選び分けまでを扱います。管理画面にグラフを数枚置きたい開発者と、その技術選定を任された担当者に向けた内容です。

まとめ：Chart.jsを選ぶ案件と別ライブラリへ切り替える案件の分かれ目

Chart.jsが向くのは、業務システムや会員サイトの画面に、折れ線・棒・円といった標準的なグラフを数枚から十数枚置く案件です。フレームワークに依存せず、設定オブジェクトを1つ渡せば描画まで終わるため、実装の手数が少なく済みます。ReactやVueでも公式に近いラッパーが保守されています。

見送るべき場面も明確です。数十万点を毎秒更新する監視画面、地図やサンキー図のように標準外の図形が要る画面、利用者が自分で軸や集計を組み替えたい分析画面。この3つではChart.jsの得意範囲を外れます。前の2つはEChartsやD3.js、最後の1つはBIツールの領域です。版は4.5系を選び、3系以前の記事のコードは移行ガイドで差分を確かめてから流用してください。

Chart.jsの定義とCanvas描画・4.5系の配布形態とバンドルサイズの実測

Chart.jsはグラフ描画に用途を絞ったライブラリです。座標計算から図形の組み立てまでを自分で書くD3.jsとは異なり、グラフの種類とデータを渡すと軸・凡例・ツールチップまでを既定値で描きます。

Canvas描画とSVG描画の違いがグラフの操作性に与える影響

Chart.jsは描画結果を1枚のcanvasに塗る方式です。SVGで描くRechartsやD3.jsは、点や棒の1つ1つがDOM要素になります。DOM要素を作らない分、点数が増えたときの描画負荷はCanvasのほうが軽く済みます。

代わりに失うものがあります。棒1本にCSSを当てる、点1つにイベントを直接張る、といった操作はできません。クリック位置の判定は公式ドキュメントのInteractionsにあるonClickオプションで受け、イベント・アクティブな要素の配列・チャート本体の3つを引数として受け取って処理します。グラフ上の要素を個別に装飾したい要件が強いなら、この時点でSVG系を候補に入れます。

npm実測で見る4.5.1の公開日と依存パッケージ・3系との距離

npm registryの記録では、4.4.9が2025年4月15日、4.5.0が同年6月14日、4.5.1が同年10月13日に公開されています。3系の最終版3.9.1は2022年8月3日で、以降の修正は4系にのみ入ります。実行時の依存は色計算用の@kurkle/colorの1つだけです。

GitHubのリリースノートを読むと、4.5.1はChromeの特定ズーム倍率でグラフが縮む問題への対応や、折れ線の点にnullを許す型定義の修正が中心でした。4.5.0ではドーナツグラフにselfJoinオプションが加わっています。1年以上新版が出ていないのは、機能追加より安定運用の段階に入っていると読めます。

UMD版208,522バイトとgzip後約70.8KBという配信サイズの実測値

2026年10月21日にjsDelivrからchart.umd.min.js（4.5.1）を取得したところ、208,522バイトでした。同じファイルをgzipの圧縮レベル9で固めると約70.8KBです。比較のため同日に取得したECharts 6系のecharts.min.jsは1,121,883バイト、gzip後で約369KBでした。

この差は、全機能入りのファイルをscriptタグで読む場合の数字です。npmとバンドラを使うなら、次章のように使う部品だけを登録して削れます。全部入りのchart.js/autoを使うと、この削減は効きません。

npmで入れてtree-shakingで登録し最初の折れ線グラフを描くまでの手順

ここからは、ViteなどのESM対応バンドラがある前提で進めます。React案件の土台づくりはVite + Reactの環境構築手順で扱っています。

chart.jsのインストールとESM専用化で変わった読み込み方の3通り

インストールはnpmの1行で終わります。

npm install chart.js@4

v4移行ガイドによると、4系はESM専用のパッケージになり、旧dist/chart.min.jsはdist/chart.umd.min.jsへ改名されました。読み込み方は用途で3通りに分かれます。バンドラがあればimport、CommonJSのコードからは動的import()、ビルドの無い静的HTMLならchart.umd.min.jsをscriptタグで読みます。3系時代の記事にあるchart.min.jsのURLをそのまま貼ると読み込みに失敗するのは、この改名が原因です。

Chart.registerで部品を選ぶ登録コードとcanvasを包むコンテナ

公式のIntegrationページでは、グラフ種別ごとに登録すべき部品が列挙されています。折れ線ならLineController・LineElement・PointElementと、x軸のCategoryScale、y軸のLinearScaleです。ツールチップと凡例はプラグイン扱いなので、表示したいなら別途登録します。

<!-- index.html：グラフ専用で position: relative のコンテナに入れる -->
<div style="position: relative; height: 320px;">
  <canvas id="orders" role="img" aria-label="2026年4月から7月の受注件数。7月が23件で最多">
    <p>受注件数は4月12件、5月19件、6月15件、7月23件です。</p>
  </canvas>
</div>

// main.js：折れ線に必要な部品だけを登録する
import {
  Chart, LineController, LineElement, PointElement,
  CategoryScale, LinearScale, Tooltip, Legend
} from 'chart.js';

Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Legend);

new Chart(document.getElementById('orders'), {
  type: 'line',
  data: {
    labels: ['4月', '5月', '6月', '7月'],
    datasets: [{ label: '受注件数', data: [12, 19, 15, 23] }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});

登録漏れがあると、ブラウザのコンソールに「登録されていない」旨のエラーが出て描画されません。棒グラフを足すときはBarControllerとBarElement、ドーナツならDoughnutControllerとArcElementを追加します。maintainAspectRatio: falseにした場合、高さは親コンテナの指定に従うので、コンテナ側にheightを書き忘れると高さ0で何も見えません。

数千点を超える時系列データで描画を止めないための間引きと設定の調整

Chart.jsは標準のグラフを手早く描くには十分速いものの、点数が増えると描画と再計算の負荷が表に出ます。公式のPerformanceページに対策がまとまっています。

decimationプラグインが動く6条件とlttb・min-maxの選び方

最も効くのは、画面の幅以上の点を描かないことです。Data Decimationのページによれば、間引きが働くのは次の条件をすべて満たすときだけです。

グラフ種別が折れ線で、データセットのindexAxisが'x'
x軸がlinearかtime（categoryでは効かない）
parsingがfalseで、データセットのオブジェクトが書き換え可能
表示範囲の点数がthreshold（既定はcanvas幅の4倍）を超えている

幅800pxのcanvasなら、既定のしきい値は3,200点です。それ以下では間引きは発動しません。アルゴリズムは既定がmin-maxで、1ピクセルごとに最小値と最大値を残すため、異常値の山を消したくない監視用途に向きます。lttbは形の印象を保ちながらsamplesで指定した点数まで減らす方式で、推移を眺める用途に合います。

import { Chart, LineController, LineElement, PointElement, LinearScale, Decimation } from 'chart.js';
Chart.register(LineController, LineElement, PointElement, LinearScale, Decimation);

// points は x 昇順に並べた [{ x: 1729468800000, y: 21.4 }, ...] の配列
new Chart(ctx, {
  type: 'line',
  data: { datasets: [{ label: '室温', data: points, pointRadius: 0 }] },
  options: {
    parsing: false,
    normalized: true,
    animation: false,
    scales: { x: { type: 'linear' } },
    plugins: { decimation: { enabled: true, algorithm: 'lttb', samples: 500 } }
  }
});

parsing・animation・軸範囲の固定で再計算を減らす設定の効き所

間引きと並べて効くのが、Chart.jsに計算させない設定です。parsing: falseは内部形式で整えたデータを渡す宣言で、normalized: trueはインデックスが一意で昇順だと伝える指定です。animation: falseにすると更新時の再描画が1回で済み、折れ線ではPath2Dのキャッシュも使われます。

軸側では、minとmaxを固定すると範囲の自動計算が省かれます。目盛りのminRotationとmaxRotationを同じ値にすれば、ラベル回転角の計算も止まります。曲線補間のtensionは既定の0のままにしてください。値を入れると自動間引きが効かなくなります。

OffscreenCanvasでWeb Workerへ描画を移すときの制約

メインスレッドの処理が詰まって入力が遅れるなら、canvas.transferControlToOffscreen()でWeb Worker側に描画を移せます。仕組み自体はWeb Workerの実装と使い分けで解説しています。

ただし制約は小さくありません。Worker内ではDOMに触れないため、ツールチップのようなマウス操作やDOMを使うプラグインが動かない可能性があり、リサイズもchart.resize()を手で呼ぶ必要があります。設定に含まれる関数はスレッド間で渡せません。操作性を捨ててでも描画を逃がしたい常時表示のモニタ画面に限って使う手段です。

導入後に詰まりやすいレスポンシブ表示・日付軸・アクセシビリティの落とし穴

描画できた後の問い合わせが多いのは、サイズが合わない、日付が並ばない、読み上げられない、の3つです。どれも設定の書き方で防げます。

親コンテナの条件とaspectRatio既定値2で高さが崩れる原因

Responsive Chartsのページは、親コンテナがposition: relativeで、かつグラフ専用であることを求めています。見出しやボタンと同じdivにcanvasを入れると、リサイズのたびに高さが伸び続ける症状が出ます。

既定ではmaintainAspectRatioがtrueで、aspectRatioは円・ドーナツ・レーダー・鶏頭図が1、それ以外が2です。横幅600pxの棒グラフは高さ300pxになるので、スマートフォン幅では潰れて見える状態です。画面ごとに高さを決めたいなら、前章のコードのようにコンテナへ高さを書き、maintainAspectRatio: falseにします。印刷時は自動でリサイズされないため、beforeprintイベントで各チャートのresize()を呼ぶ処理が別に要ります。

time軸の描画に日付ライブラリとアダプタの2つが必要になる理由

x軸をtype: 'time'にした途端に描画が止まる、という詰まり方は典型例です。Time Cartesian Axisのページには、日付ライブラリと対応するアダプタの両方が必要だと書かれています。Chart.js本体は日付の解析と書式化を持っていません。

date-fnsを使う場合はnpm install date-fns chartjs-adapter-date-fnsで2つを入れ、import 'chartjs-adapter-date-fns';を1行足します。アダプタは2026年10月時点で3.0.0です。日付が文字列のままでは間引きの条件（parsing: false）を満たせないため、大量データでは数値のタイムスタンプに変換してから渡します。

canvasが読み上げられない問題へのrole・aria-label・代替テキスト

Accessibilityのページは、canvasの中身はスクリーンリーダーから読めず、アクセシブルにする責任は利用者側にあると明記しています。対策は、role="img"とaria-labelで名前を付けるか、canvasの内側に代替の文章を置くかです。

「お使いのブラウザは対応していません」という定型文は、悪い例として挙げられています。前章のコードのように、グラフが伝えたい結論（7月が最多など）と主要な数値を書いてください。受託開発でアクセシビリティ要件が契約に含まれる場合、この代替テキストも検収の対象です。

Recharts・ECharts・D3.js・BIツールと比べた採用条件と見送り場面

選び分けは、描画方式・点数・表現の自由度・誰が操作するか、の4軸で決まります。2026年10月21日時点のnpmの版とあわせて整理します。

グラフの描画方式・扱える点数・表現の自由度で並べた5択の比較表

選択肢	最新版	描画	向く点数	表現の自由度
Chart.js	4.5.1（MIT）	Canvas	間引き込みで数万点	標準グラフ中心
Recharts	3.10.1（MIT）	SVG	数百〜数千点	React部品で組む
ECharts	6.1.0（Apache-2.0）	Canvas／SVG	数十万点以上	地図・関係図まで
D3.js	7.9.0（ISC）	主にSVG	実装次第	制限なし
BIツール	製品ごと	製品依存	製品依存	利用者が組み替え

「向く点数」は描画方式から見た目安で、計測値ではありません。Rechartsは点ごとにSVG要素を作るため、点数が増えるほどDOMが重くなります。D3.jsで独自図形を描く例はD3.jsでのバブルチャートの作り方を参照してください。

Chart.jsを採用してよい条件とEChartsやD3.jsへ回す条件

Chart.jsで決めてよいのは、グラフ種別が折れ線・棒・円・散布図・レーダーの範囲に収まり、1系列あたりの点数が間引きで扱える範囲で、操作はホバーとクリック程度という案件です。フレームワークをまたいで同じ書き方を使えるため、ReactとVueが混在する社内システム群でも部品を揃えやすい利点があります。React側はreact-chartjs-2（5.3.1、React 16.8〜19対応）、Vue側はvue-chartjs（5.3.4）が使えます。

EChartsへ回すのは、数十万点のリアルタイム更新、地図・ヒートマップ・サンキー図が要件にある場合です。ズームやパンはChart.jsでもchartjs-plugin-zoom（2.2.0）で足せますが、範囲選択と複数グラフの連動まで求められたらECharts側が手堅い選択です。D3.jsは、既製のグラフ種別に当てはまらない独自の表現を作るときに限ります。

グラフを自作せずBIツールで済ませたほうがよい画面の見分け方

判断を誤りやすいのがこの境界です。閲覧者が「部署別に切り替えたい」「期間を自由に変えたい」と求める画面を、Chart.jsで作り込むのは見送ってください。軸や集計単位の組み合わせごとにAPIと画面を追加する作業が続き、改修費が膨らみます。こうした分析用途はBIツールの領域です。

逆に、業務フローの途中で決まった指標を見せる画面、たとえば受注登録の直後に月次推移を出す画面はChart.jsで作るほうが軽く済みます。両者の切り分けは予実管理ダッシュボードの作り方とBI・個別開発の判断でも具体例を交えて扱う内容です。既存のデータ基盤をつないでBIで可視化する構成の検討は、BIツール導入支援で要件整理から相談を受け付けています。

Chart.jsの導入前に確認されるライセンス・版・連携のよくある質問

導入の検討段階でよく出る質問を5つ取り上げます。

Chart.jsは商用のWebサービスでも無料で使えますか？

使えます。Chart.jsはMITライセンスで、npm registryの4.5.1のメタデータでもMITと記載されています。商用サービスへの組み込みや改変も認められており、条件は著作権表示とライセンス文をソフトウェアに含めることです。バンドラで1ファイルにまとめる場合も、ライセンスコメントを消さない設定にしておくと監査で慌てずに済みます。有償の商用ライセンスが必要になるHighchartsとは扱いが異なる点に注意してください。

Chart.jsとD3.jsはどちらから学ぶべきですか？

管理画面に標準的なグラフを置くことが目的なら、Chart.jsから始めてください。設定オブジェクトを書けば軸や凡例まで描かれるため、最初の1枚を数十行で出せます。D3.jsはデータを座標へ変換する部品の集まりで、軸1本も自分で組み立てます。既製の種別に無い図を描く必要が出てから学ぶ順番で、遠回りにはなりません。

ReactやVueでChart.jsを使うにはどうすればよいですか？

Reactはreact-chartjs-2、Vueはvue-chartjsを使うのが一般的です。2026年10月21日時点の最新版はそれぞれ5.3.1と5.3.4で、どちらもchart.jsの4.1.1以上を前提にしています。ラッパーを使っても、使う部品をChart.registerで登録する手順は変わりません。登録を共通モジュールに1回だけ書いておくと、画面ごとの書き漏れを防げます。

Chart.jsで描ける点数に上限はありますか？

ライブラリとしての固定の上限はありません。実際の限界を決める条件は端末性能と設定です。折れ線でparsing: falseと間引きを有効にすれば、canvas幅の4倍を超えた点は描画前に減らされます。間引きの条件を満たさない棒グラフやcategory軸の折れ線では、点数がそのまま描画負荷になります。この場合は、サーバー側で日次や時間単位に集計してから渡すのが確実です。

Chart.js 2系・3系の記事のコードは4系でそのまま動きますか？

そのままでは動かない箇所があります。2系のxAxes配列による軸指定は3系で廃止され、4系では軸設定のgrid.drawBorderがborder.displayへ改名されました。ファイル名もchart.min.jsからchart.umd.min.jsに変わっています。2020年以前の入門記事のコードを流用するときは、v4移行ガイドの変更点と照らし合わせてください。