I'm using line chart js to display a graph and I'm trying to calculate the difference between the selected point and the previous one and render it in a tool tip.
I've read that I should use callbacks function but when I tried it nothing happen.
Even I only try to change the tittle Here's my options for my line chart if anyone can help :) Chart js version : 3.6.1
plugins: {
legend: {
display: false
},
title: {
display: true,
font: {
size: 18,
},
color: "white"
},
zoom: {
zoom: {
drag: {
enabled: true
},
mode: 'xy',
}
},
tooltip: {
callbacks: {
title: function () {
return "my tittle";
}
}
}
}
This is because you are using V2 syntax in with V3, you can read the namespace in the options.
Tooltip has been moved to the plugins section
For all changes please read the migration guide
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
title: () => ('Title')
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>