1👍
✅
You can configure a custom callback in the tooltip section of the options:
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<canvas id="myChart"></canvas>
<style>
#myChart {
width: 400px;
height: 400px;
}
</style>
<script>
var data = {
datasets: [
{
label: ' company 1 ',
data: [{
x: 36,
y: 192,
r: 22.13
}, ],
backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
borderColor: 'rgba( 255, 99, 132, 1 )',
},
{
label: ' company 2 ',
data: [{
x: 31,
y: 161,
r: 14.69
}, ],
backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
borderColor: 'rgba( 255, 99, 132, 1 )',
},
{
label: ' company 3 ',
data: [{
x: 33,
y: 106,
r: 9.08
}, ],
backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
borderColor: 'rgba( 255, 99, 132, 1 )',
},
{
label: ' company 4 ',
data: [{
x: 34,
y: 97,
r: 3.62
}, ],
backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
borderColor: 'rgba( 255, 99, 132, 1 )',
},
{
label: ' company 5 ',
data: [{
x: 27,
y: 91,
r: 9.67
}, ],
backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
borderColor: 'rgba( 255, 99, 132, 1 )',
}
]
};
// Chart options
var options = {
scales: {
x: {
min: 0,
max: 50,
title: {
display: true,
text: 'market growth'
}
},
y: {
min: 0,
max: 210,
title: {
display: true,
text: 'Sales'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => `${ttItem.dataset.label} (${ttItem.raw.r}) Million`
}
},
legend: {
display: false
}
}
};
// Create the chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bubble',
data: data,
options: options
});
</script>
Source:stackexchange.com