4👍
✅
The title
and other items on the tooltip can be customized using callback functions. The correct syntax looks as follows.
tooltips:{
callbacks: {
title: (tooltipItem, data) => "New title"
}
}
Please also have a look on the following more complex sample derived from https://www.chartjs.org/samples/latest/tooltips/callbacks.html. It should make no difference whether you work with a scatter
or a line
chart.
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: 'red',
backgroundColor: 'red',
data: [15, 22, 18, 28, 8, 13, 24],
fill: false,
}, {
label: 'My Second dataset',
borderColor: 'blue',
backgroundColor: 'blue',
data: [5, 31, 15, 22, 19, 29, 12],
fill: false,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Custom Information in Tooltip'
},
tooltips: {
mode: 'index',
callbacks: {
title: (tooltipItem, data) => data.labels[tooltipItem[0].index],
footer: (tooltipItems, data) => {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
},
},
footerFontStyle: 'normal'
},
hover: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Value'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Source:stackexchange.com