npmの場合は下記を実行してください。
# npm install chart.js
CDNを利用する場合は下記から対象のバージョンと形式を選択し、[Copy Script Tag] でスクリプトタグを張り付けてください。
時系列チャート(type: 'time')を扱う場合は、日時ライブラリとアダプタが必要です。
簡単なサンプルを示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg=="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<div style="width:400px">
<canvas id="mychart"></canvas>
</div>
<script>
var ctx = document.getElementById('mychart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
datasets: [{
label: 'Red',
data: [20, 35, 40, 30, 45, 35, 40],
borderColor: '#f88',
}, {
label: 'Green',
data: [20, 15, 30, 25, 30, 40, 35],
borderColor: '#484',
}, {
label: 'Blue',
data: [30, 25, 10, 5, 25, 30, 20],
borderColor: '#48f',
}],
},
options: {
y: {
min: 0,
max: 60,
},
},
});
</script>
</div>
</body>
</html>
Chart() の第二引数には下記のコンフィグパラメータを指定します。Chart.js 3.2.1 のものです。
いくつかのサンプルを示します。
作成済のチャートを更新するには次のようにします。
// チャートを作成する
var ctx = document.getElementById('mychart');
var myChart = new Chart(ctx, { ... });
// チャートのパラメータを変更する
myChart.options.scales.y.max = 100;
// チャートを更新する
myChart.update();
複数のグラフに対してデフォルト値を変更するには、スクリプトの先頭で Chart.defaults オブジェクトの値を変更します。
// デフォルト値を変更しておく
Chart.defaults.animation.duration = 500;
// グラフを作成する
var ctx = document.getElementById('mychart-canvas-background');
var myChart = new Chart(ctx, { ... });