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";
}
}
}
}
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";
}
}
}
}
- Did you manage to find a solution? – Alvin Sartor Commented Jun 22, 2022 at 11:53
-
Not your case but for me the problem was that I'm using another plugin,
stacked100, which was already replacing the tooltip, that's why my callbacks were not being called. This plugin offersreplaceTooltipLabel : falseso you can customize the tooltip with callbacks the way you're trying to do. – maganap Commented Apr 21, 2023 at 16:48
1 Answer
Reset to default 3This 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./ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>