Chart.jsとは？CanvasベースのJavaScript chart library

ページ内ナビ

概要

Chart.jsはHTML Canvasへchartを描画するJavaScriptライブラリです。共通のdata・options構造で主要なchart typeを扱い、legend、tooltip、animation、responsive表示を設定できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

chart type・labels・datasetsを指定して描画する

new Chart(canvas, config)へchart type、labels、datasetsを渡して描画します。

出典：[2]

optionsとpluginで表示・interactionを調整する

animation、responsive、legend、tooltipをoptionsから調整し、pluginで拡張できます。

出典：[2][1]

向いている用途

dashboardや管理画面へ一般的なchartを追加したい場合に向く

bar・line・pie等を共通APIで扱えるため、集計画面やanalytics UIへ導入しやすい構成です。

出典：[1][2]

導入前の確認

chart.js/autoは便利だがtree-shakingを使えない

bundle sizeを抑える場合は必要なcontroller、element、scale、pluginだけをregisterしてください。

出典：[2]

参考にした公式資料

[1]Chart.js v4.5.1 README(2026-10-05)
[2]Chart.js v4.5.1 step-by-step guide(2026-10-05)
[3]Chart.js v4.5.1 package metadata(2026-10-05)
[4]Chart.js v4.5.1 release(2026-10-05)

編集部からの補足

一般的なchartを短い設定で追加しやすく、dashboardや管理画面に向きます。chart.js/autoはtree-shakingできないため、bundle sizeを抑えたい場合は必要componentだけをregisterする構成も比較してください。

3ステップで試す

1
ソースを取得
git clone --depth 1 https://github.com/chartjs/Chart.js.git
2
リポジトリへ移動
cd Chart.js
3
公式手順を確認
READMEのInstallation / Quick Start / Getting Startedにある公式コマンドを続けて実行してください。
find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit

公式READMEで確認

成長

成長の推移 · 直近30日

67,736 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 12
Open PR: 95

開発アクティビティを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

javascript
chart
html5
canvas
graph
html5-charts

Stars: 67,736
Forks: 11,948
Watchers: 1,345
Open Issues: 499
Contributors: 426
所有者種別: Organization
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/10/04