1月18件、2月25件、3月22件。月ごとの問い合わせ件数は一覧でも分かりますが、棒グラフにすると増減を追いやすくなります。
今回は、1月から6月までの問い合わせ件数をChart.jsで棒グラフにします。
Chart.jsとは
Chart.jsは、棒グラフや折れ線グラフなどをWebページに描画するJavaScriptライブラリです。HTMLに<canvas>要素を置き、JavaScriptでデータと表示方法を渡すとグラフが描かれます。
Chart.jsを使えば、棒の位置や目盛りを自分で計算して描く必要はありません。今回は縦棒グラフを1つ表示し、そのあとで数値、色、グラフの種類を変えてみます。
確認環境
- Chart.js 4.5.1
- Windows 11
- Google Chrome 150.0.7871.102
- 確認日: 2026-07-13
CDNのURLにはバージョン番号を入れ、後日試したときも同じ4.5.1が読み込まれるようにしています。
グラフの描画先を用意する
Chart.jsは<canvas>要素の中にグラフを描きます。HTMLのbody内に、次のコードを置きます。
<div class="chart-container">
<canvas
id="inquiryChart"
role="img"
aria-label="2026年1月から6月までの問い合わせ件数。1月18件、2月25件、3月22件、4月30件、5月28件、6月35件。"
>
2026年1月から6月までの問い合わせ件数を示す棒グラフです。
</canvas>
</div>
id="inquiryChart"は、このあとJavaScriptから描画先を見つけるための目印です。role="img"は<canvas>要素を画像として扱う指定で、aria-labelにはグラフの内容と各月の値を書いています。<canvas>へ描かれた図形だけでは、スクリーンリーダーにデータの意味が伝わらないためです。
グラフの幅と高さは、<canvas>要素を囲む親要素に指定します。次のCSSをhead内のstyle要素へ書きます。
.chart-container {
position: relative;
width: min(100%, 720px);
height: 360px;
}
幅は最大720px、画面が狭いときは画面幅に合わせます。高さは360pxで固定します。
CDNからChart.jsを読み込む
CDNは、Chart.jsのファイルを自分のPCへ置かず、配信用URLから読み込む方法です。<canvas>要素より後ろに、次のscript要素を置きます。
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
この1行を読み込むと、JavaScriptからChartを使えるようになります。初期化コードは必ずこのscript要素より後ろに書いてください。順番が逆だと、ブラウザのコンソールにChart is not definedと表示されます。
Chart.js公式のGetting Startedではバージョン番号のないCDN URLも紹介されています。この記事では、確認したコードと配信バージョンが後からずれないように@4.5.1を付けました。
棒グラフを描く
Chart.jsを読み込んだscript要素の下に、グラフを作るコードを書きます。
const canvas = document.getElementById('inquiryChart');
const inquiryChart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [
{
label: '問い合わせ件数',
data: [18, 25, 22, 30, 28, 35],
backgroundColor: 'rgba(54, 162, 235, 0.55)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0
},
title: {
display: true,
text: '件数'
}
}
}
}
});
document.getElementById()でid="inquiryChart"の<canvas>要素を取得し、その要素をnew Chart()の第1引数へ渡します。第2引数がグラフの設定です。この設定のうち、最初に押さえる場所はtype、data、optionsの3つです。
typeはグラフの種類
type: 'bar'
barは棒グラフです。ここをlineに変えると折れ線グラフになります。
dataは横軸のラベルと数値
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [
{
label: '問い合わせ件数',
data: [18, 25, 22, 30, 28, 35]
}
]
}
data.labels[0]の'1月'と、data.datasets[0].data[0]の18が組み合わされ、1月の値として表示されます。このサンプルでは、月と数値を6件ずつ同じ順番で並べています。
datasetsには、グラフに載せるデータのまとまりを配列で入れます。今回は「問い合わせ件数」だけなので、配列の中のオブジェクトも1つです。labelに書いた「問い合わせ件数」は、グラフ上部の凡例に表示されます。
optionsは軸とサイズの設定
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0
},
title: {
display: true,
text: '件数'
}
}
}
}
responsive: trueにすると、親要素の幅に合わせてグラフの幅が変わります。maintainAspectRatio: falseは、先ほどCSSで指定した高さ360pxを使うための設定です。
beginAtZero: trueを指定すると、Y軸に0が含まれます。件数を比べる棒グラフでは、棒の長さを0から見比べられるように、この設定を入れています。
ticks.precision: 0は、Y軸の目盛りを小数なしで表示するための指定です。titleでは、Y軸の横に「件数」と表示しています。
HTMLを保存してブラウザで開く
3つの手順を1つのファイルにすると、次のHTMLになります。chartjs-sample.htmlという名前で保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js 棒グラフのサンプル</title>
<style>
body {
margin: 0;
padding: 24px;
color: #1f2937;
font-family: sans-serif;
}
.chart-container {
position: relative;
width: min(100%, 720px);
height: 360px;
}
</style>
</head>
<body>
<h1>月別問い合わせ件数</h1>
<div class="chart-container">
<canvas
id="inquiryChart"
role="img"
aria-label="2026年1月から6月までの問い合わせ件数。1月18件、2月25件、3月22件、4月30件、5月28件、6月35件。"
>
2026年1月から6月までの問い合わせ件数を示す棒グラフです。
</canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
const canvas = document.getElementById('inquiryChart');
const inquiryChart = new Chart(canvas, {
type: 'bar',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [
{
label: '問い合わせ件数',
data: [18, 25, 22, 30, 28, 35],
backgroundColor: 'rgba(54, 162, 235, 0.55)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0
},
title: {
display: true,
text: '件数'
}
}
}
}
});
</script>
</body>
</html>
保存したファイルをChromeで開くと、1月から6月までの棒が6本表示されます。このHTMLは、上に書いた確認環境で描画を確認済みです。
数値と色を変える
別のデータを表示するときは、labelsとdataを書き換えます。たとえば、7月から9月までの問い合わせ件数に変えるなら次の形です。
data: {
labels: ['7月', '8月', '9月'],
datasets: [
{
label: '問い合わせ件数',
data: [32, 27, 40]
}
]
}
月と数値の位置が対応するため、labelsとdataは同じ個数、同じ順番にします。
月や数値を変えたときは、<canvas>要素のaria-labelと代替テキストも同じ月・件数へ書き換えます。
棒の色はbackgroundColor、棒の枠線はborderColorで変えます。
backgroundColor: 'rgba(255, 99, 132, 0.55)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1
rgba()の最後にある0.55は不透明度を表すアルファ値です。0は完全に透明、1は完全に不透明になります。
折れ線グラフに変える
同じ月別データを折れ線グラフで見たいときは、typeを1か所だけ変更します。
type: 'line'
棒グラフは月ごとの件数を比べるとき、折れ線グラフは時間の流れに沿った増減を見るときに向いています。barとlineを切り替えると、同じデータでも見え方の違いを確認できます。
typeをlineへ変えたら、aria-labelと<canvas>要素内の「棒グラフ」も「折れ線グラフ」へ変更します。
表示されないときに確認する場所
Chart is not definedと表示される
Chart.jsを読み込むscript要素より前に、new Chart()を実行していないか確認します。CDNのURLが途中で切れていないか、インターネットへ接続できているかも見てください。URLが正しいのに直らない場合は、Chromeの開発者ツールにあるNetworkタブで、chart.umd.min.jsの取得に失敗していないか確認します。
グラフの高さが合わない
<canvas>要素ではなく、.chart-containerに高さを指定します。optionsにmaintainAspectRatio: falseが入っているかも確認します。
月と棒の位置がずれる
labelsとdataの個数、並び順を比べます。このサンプルなら、1月はdata.labels[0]、18件はdata.datasets[0].data[0]です。
古い記事のyAxesが動かない
Chart.js 2系ではyAxesを使うコードがありました。この記事で使う4.5.1では、Y軸の設定をoptions.scales.yへ書きます。
参考
- Chart.js Getting Started（確認日: 2026-07-13）
- Chart.js Integration（確認日: 2026-07-13）
- Chart.js Data structures（確認日: 2026-07-13）
- Chart.js Responsive Charts（確認日: 2026-07-13）
- Chart.js Accessibility（確認日: 2026-07-13）
- Chart.js Releases（確認日: 2026-07-13）
コメント