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)教えてもらっています。
どうかよろしくお願いいたします。
また、同じような内容で投稿、削除を繰り返し行っていることお許しください。

回答No.2

retorofan

申し訳ございません。 m(__ )m

テキストとボックス部分で
それぞれ別の色にしたい、と解釈していました。

とりあえず、一件落着で良かったですね。

回答No.1

retorofan

一問一答で
確実にスキルをアップされてはいかがでしょうか。

Q テキストとボックス部分で別の色の出来ないか？

■現在
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),
};
});
}
},

■修正後
generateLabels: function(chart) {
return chart.data.datasets.map(function(datasets, i) {
return {
fontColor: ['red','orange','violet'][i], //凡例の色を指定
datasetIndex: i,
text: datasets.label,
fillStyle: datasets.backgroundColor,
strokeStyle: datasets.borderColor,
// 表示状態に連動して取り消し線表示
hidden: !chart.isDatasetVisible(i),
};
});
}
},

お礼

retorofan さん有り難うございます。
fontColor: ['red','orange','violet'][i]
では、凡例毎に色は変わるのですがテキストとボックス部分は同じ色となるので、それはそれでいいのですが
Q テキストとボックス部分で別の色の出来ないか？
の趣旨は、デフォルトの凡例のように、ボックス部分(長四角)の色は変わるのはいいが、テキストの色は例えば黒で指定出来ないかと・・・別にpinkみたいな淡い色を使わなければいいのではと思えばそれはかんがえかたですが

補足

下記のように修正し望み以上の結果が得られました。
return {
fontColor: 'red', //凡例のtext色を指定
datasetIndex: i,
text: datasets.label,
//fillStyle: datasets.backgroundColor,
fillStyle: ['pink','blue','violet'][i], //凡例のbox色を指定
strokeStyle: datasets.borderColor,
// 表示状態に連動して取り消し線表示
hidden: !chart.isDatasetVisible(i),
};