📊
Chart.jsの知りたかったオプション盛り合わせ
Chart.jsで作りたかったグラフ
Chart.jsで以下のようなデザインを作りたいと思った時にけっこう大変だったのでそれのまとめです
大変だったポイント
- おしゃれデザインのあれこれ
- Y軸の間隔を1刻みにすること
- X軸の日付のフォーマット
- ツールチップのフォーマット
線グラフの周りのオプション
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: datasetLabel, // データセットの名前（凡例に表示される）
data: data, // グラフにプロットするデータ
borderWidth: 3, // 線の太さ
borderColor: 'purple', // 線の色（境界線の色）
tension: 0.5, // 線の曲線の柔らかさ（0〜1の値、0は直線）
fill: true, // 線の下の範囲を塗りつぶすかどうか
backgroundColor: 'rgba(90, 103, 177, 0.5)', // 塗りつぶしの色
// ポイント（点）のデザイン
pointBackgroundColor: 'green', // データポイントの背景色
pointBorderColor: 'red', // データポイントの境界線の色
pointBorderWidth: 5, // データポイントの境界線の太さ
pointRadius: 10, // データポイントの大きさ
pointHoverRadius: 20, // ホバーした時の大きさ
}
]
},
});
上記の単調な色を詰め込んだものを実際に表示すること、こちらのようなとても素敵な趣味の悪いグラフのようになります
タイトルと判例（表示と非表示の切り替え）
options: {
plugins: {
title: { display: false, }, // グラフタイトルの表示/非表示
legend: { display: false, }, // 判例の表示/非表示
},
}
ツールチップのフォーマット
ツールチップの表示をYYYY/MM/DDにする
options: {
plugins: {
tooltip: {
enabled: true,
callbacks: {
title: function(tooltipItems) {
if (tooltipItems.length > 0) {
const tooltipItem = tooltipItems[0];
const timestamp = tooltipItem.parsed.x;
const date = new Date(timestamp);
return date.toLocaleDateString('ja-JP', {
dateStyle: 'short'
});
}
return '';
},
}
}
},
scales: {
x: {
type: 'time',
}
}
}
X軸周り：日付のフォーマットやグリッド、軸ラベル
options: {
scales: {
x: {
display: true,
type: 'time',
// 日付のフォーマット
time: {
unit: 'day',
displayFormats: {
day: 'MM/dd'
}
},
// 軸ラベルの最小角度と最大角度
ticks: {
minRotation: 45,
maxRotation: 45
}
// 補助線
grid: {
color: "rgba(255,0,255,0.5)",
lineWidth: 1,
},
},
}
}
Y軸周り：主線の間隔や補助線
stepsizeとmaxTicksLimit辺りがけっこう関与していて、どっちもよしなに設定してあげないとやりたいことができない落とし穴があった気がします…なんだっけ…？
たぶんstepsizeとmaxTicksLimitの2つをどちらも設定してあげれば大丈夫だと思います
options: {
scales: {
y: {
display: true, // 表示/非表示
suggestedMax: 5, // 既定とする最大値
beginAtZero: true, // グラフの最小値をゼロからにするかどうか
// Y軸ラベル
ticks: {
display: true, // 表示/非表示
stepSize: 1, // 主線の間隔
maxTicksLimit: 20 // 主線の最大本数
},
// Y軸の補助線
grid: {
color: "rgba(0,0,255,0.1)",
lineWidth: 1,
}
},
}
}
さいごに
ガチャガチャっといい感じにくっつけたものがこちら
こちらのサービスで元気に動いています（2025/02/02現在）
参考
Discussion