まとめ
- チャートの右側にラベルを表示するためのプラグインを用意し、これを使用した。
- Chart.js のオプションで設定する方法を見つけることはできなかった。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
<title>Chart.js sandbox</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
// グラフに描画するラベルやデータ
const props = {
leftLabels: ['犬', 'お米', '国語', '土曜日', 'スプーン', '野球', '右'],
rightLabels: ['猫', 'パン', '算数', '日曜日', 'フォーク', 'サッカー', '左'],
datasets: [
{ label: '1年1組', data: [20, 35, 40, 30, 45, 35, 40] },
],
};
// グラフの右側にラベルを描画するためのプラグイン
const writeRightLabels = {
id: 'writeRightLabels',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { left, width }, scales: { y } } = chart;
ctx.save(); // 本関数開始以前の描画状態を保存
const right = left + width;
y.ticks.forEach((tick, index) => {
// プラグインに与えられた引数である右側のラベルをグラフへ描画
ctx.fillText(options.rightLabels[index], right, y.getPixelForTick(index));
});
ctx.restore(); // 本関数開始以前の描画状態へ戻す
},
};
// Chart.js 部分
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'line', // 線チャート
data: {
labels: props.leftLabels,
datasets: props.datasets,
},
options: {
indexAxis: 'y', // 90 度回転したグラフに設定 (Y軸に対してX軸が変動量となるグラフを描画)
layout: {
padding: {
right: 50, // 右側の項目が1文字のみ表示される問題を、幅を指定することで解消
}
},
plugins: {
// プラグインへの引数を指定
writeRightLabels: {
rightLabels: props.rightLabels,
}
}
},
plugins: [writeRightLabels],
});
</script>
</body>
</html>
参考ページ
おわりに
コード量としては大したことはありませんでした。ですけれども、 Chart.js のオプションで可能なのかどうかを調べるためにドキュメントを読み込んだり、 Chart.js のプラグインとして実装するにしても Chart.js の API や Canvas の API を調べたり、といったところで多くの時間を費やしました。
なんとか実現できたものの、使わなさそうというのが実際のとところなのですけれども、供養も兼ねて投稿いたしました。
以上です。