8👍
✅
You can use the following tooltip‘s label callback function, for showing different tooltip labels when hovered on different graphs :
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
also, your first dataset should be for line
chart, followed by bar
, like so :
datasets: [{
type: "line",
label: 'Quantity Sold ',
data: quantityData
}, {
label: 'Total Profit ',
data: amountData
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
type: "line",
label: 'Quantity Sold',
data: [40, 50, 60, 70, 80],
borderColor: 'orange',
fill: false
}, {
label: 'Total Profit',
data: [1399.3, 356.62, 1249, 465.23, 1480.4],
backgroundColor: 'rgba(0, 119, 220, 0.4)',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Source:stackexchange.com