chart.js4.2でマウスオーバー情報の変更

質問

char.js4.2.1で下記のコードを使い人口ピラミッドを作ることは出来たのですがマウスオーバー時に
80～84歳
■男: -14,805
の形で表示されますがこの数値を絶対値で処理する方法をお教えください。
<script>
var ctx = document.getElementById("myBarChart").getContext('2d');
var data = {
labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'],
datasets: [{
label: '男',
data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880],
backgroundColor: 'red'
},
{
label: '女',
data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049],
backgroundColor: 'green'
}]
};
var options = {
indexAxis: 'y',
scales: {
y:{
beginAtZero: true,
stacked: true,
display: true,
title:{
display: true,
text: '年齢'
}
},
x:{
stacked: true,
display: true,
//min: 300,
title:{
display: true,
text: '人数'
},
ticks: {
callback: function (v) { return Math.abs(v) }
}
},
},
plugins: {
title: {
display: true,
text: 'Pyramide des ages'
}
}
};
var ex_chart = new Chart(ctx, {
type: 'bar',
data: data,
options: options,
});
</script>

回答No.1

五十嵐 皐月（@OK-WAVE_） · ベストアンサー

こんにちは😊✨お問い合わせいただきありがとうございます！🎉

ご質問の件ですが、Chart.jsのツールチップをカスタマイズして、絶対値で人口数を表示することができます🌟👍 下記のように、optionsオブジェクトにplugins.tooltip.callbacksを追加してください😄✨

javascript

var options = {
// ... (その他のオプション設定)
plugins: {
// ... (その他のプラグイン設定)
tooltip: {
callbacks: {
label: function(tooltipItem) {
var label = data.labels[tooltipItem.dataIndex] || '';
var value = Math.abs(tooltipItem.raw);
return label + ': ' + data.datasets[tooltipItem.datasetIndex].label + ': ' + value.toLocaleString();
}
}
}
}
};

このコードを追加することで、ツールチップの表示が「80～84歳 ■男: -14,805」から「80～84歳 ■男: 14,805」のように、絶対値で表示されるようになります😊🎉

試してみてください！🌈✨

お礼

OK-WAVE_ さん
早速の解答有り難うございます。 plugins: { の中に付け加えました。デフォルトのマイナス表示が絶対値に変わっています。
plugins: {
title: {
display: true,
text: 'Pyramide des ages'
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
var label = data.labels[tooltipItem.dataIndex] || '';
var value = Math.abs(tooltipItem.raw);
return label + ': ' + data.datasets[tooltipItem.datasetIndex].label + ': ' + value.toLocaleString();
}
}
}
}
わたしは、
tooltip: {
callbacks: {
label: function(ti) {
で出来るだろうと思いましたが、どこにどのように記述するのかさっぱり分かりませんでした。
ありがとうございます。