We know that custom data formatting in Chart.js tooltips allows for the visualization of data. So, create custom formatting to display on tooltips in chart.js. You can use the tooltip object within the chart options.
Using a Custom Tooltip Callback Function
Using the custom tooltip callback function provides developers with the clarity and flexibility to create highly tailored and interactive data visualizations that meet the unique needs of their applications. This code demonstrates to your charts, including data values on basic charts using, HTML and JavaScript with the chart.js library.
Syntax:
options: {
tooltips: {
callbacks: [{
ticks: {
label: function(tooltipItem, data) {
// Insert formatting code here
}
}
}]
}
}
Example: The below code Use a Custom Tooltip Callback Function to custom data formatting to display on tooltip.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Custom Tooltip Formatting</title>
<script src=
</script>
</head>
<style>
div {
height: 500px;
width: 500px;
}
</style>
<body>
<h1>Geeksforgeeks | </h1>
<small>
<i>
Create custom data formatting to
display on tooltip
</i>
</small>
<div> <canvas id="myChart"></canvas></div>
<script>
const ctx =
document.getElementById('myChart').
getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:
['C++', 'HTML', 'Python',
'Java', 'Thanks'],
datasets: [{
label: 'Data',
data: [12, 19, 3, 5, 2],
backgroundColor:
'rgba(255, 99, 132, 0.2)',
borderColor:
'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
const value =
data.datasets[tooltipItem.datasetIndex].
data[tooltipItem.index];
return 'Value: ' + value;
}
}
}
}
});
</script>
</body>
</html>
|
Output:
Using a Plugin
We know that plugins offer a powerful mechanism for extending and enhancing the functionality of software applications, enabling greater flexibility and scalability while fostering collaboration and innovation within the developer community.
Syntax:
Chart.plugins.register({
afterInit: function(chart) {
chart.tooltip._model.bodyFormatter = function(body, data) {
return body.map(function(bodyItem) {
return 'Value: ' + bodyItem.lines[0];
});
};
}
});
Example: The below code use a Plugin to custom data formatting to display on tooltip.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Custom Tooltip Formatting</title>
<script src=
</script>
</head>
<body>
<h1>
Geeksforgeeks | create custom data
formatting to display on tooltip
</h1>
<canvas id="myChart"></canvas>
<script>
Chart.plugins.register({
afterInit: function (chart) {
chart.tooltip._model.bodyFormatter =
function (body, data) {
return body.map(function (bodyItem) {
return 'Value: ' + bodyItem.lines[0];
});
};
}
});
const ctx =
document.getElementById('myChart').
getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:
['C++', 'HTML', 'Python',
'Java', 'Thanks'],
datasets: [{
label: 'Data',
data: [12, 19, 3, 5, 2],
backgroundColor:
'rgba(255, 99, 132, 0.2)',
borderColor:
'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {}
});
</script>
</body>
</html>
|
Output: