chart.js4系で凡例をカスタマイズする方法
今回、chart.jsの2系から4系に変更するにあたり下記の多重円のサンプルで以前から気になっていた系列を利用した凡例の■（以前は濃いグレー）を黒からそれぞれ任意の色に出来ないかと思い悩んでいましたが、米国のあるQ&Aサイトに載っていた方法（前に投稿しましたが削除済み）等試しましたがそこまでしなくても単にfontColorをreturn内で指定するだけで出来ました（下記コード）。
しかしこの方法でもボックス部分とテキストを含めた凡例全体の色が変わりました。今回はpinkで指定したところ、テキストの色がpinkでは見た目が鮮明とはいえません。やはり、テキストとボックス部分で別の色の出来ないかと思いまして、何か解決方法があればお教えください。
<script>
const CHART_COLORS = {'赤': 'rgb(230,0,18)','プラム': 'rgb(221,160,221)','マゼンタ': 'rgb(228,0,127)','スカイブルー': 'rgb(160,216,239)','紫': 'rgb(146,7,131)','緑': 'rgb(0,153,68)','ゴールド': 'rgb(255, 215, 0)'
};
const ctx = document.getElementById("myPieChart");
const myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Jan','Feb','Mar','Apr','May','June'], // Ｘ軸のラベル
datasets: [
{ label: 'NY', data: [32, 59, 40, 42, 38, 25],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false},
{ label: 'LA', data: [52, 45, 38, 28, 59, 40],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false},
{ label: 'CHI', data: [65, 23, 48, 60, 62, 70],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}
]
},
options: {
responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
plugins: {
legend: { // 凡例
display: true, // 表示の有無
position: 'bottom', // 表示位置
labels: {
generateLabels: function(chart) {
return chart.data.datasets.map(function(datasets, i) {
return {
fontColor: 'pink', //凡例の色を指定
datasetIndex: i,
text: datasets.label,
fillStyle: datasets.backgroundColor,
strokeStyle: datasets.borderColor,
// 表示状態に連動して取り消し線表示
hidden: !chart.isDatasetVisible(i),
};
});
}
},
onClick: function(e, legendItem){
const index = legendItem.datasetIndex;
const ci = this.chart;
const meta = ci.getDatasetMeta(index);
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
ci.update();
}
}
}
}
});
</script>
さらに欲を言えば「labels: ['Jan','Feb', 」等を使ったデフォルトの凡例も別位置に配置出来ないかと考えています。なお、デフォルト凡例と <button・・でで作った凡例の両方操作できる方法は、このサイトで以前(https://okwave.jp/qa/q9820330.html)教えてもらっています。
どうかよろしくお願いいたします。
また、同じような内容で投稿、削除を繰り返し行っていることお許しください。
お礼
ありがとうございます。