How to Add Tooltip Line Breaks in ChartJS?
Last Updated :
21 Aug, 2024
Chart.js tooltips are used to provide additional information about data points when a user hovers over them. By default, tooltips display information in a single line, but you can customize them to include line breaks for better readability or to present more complex data. This customization can be achieved through various callback functions, allowing you to format the tooltip content with new lines or additional details.
Chart.js CDN link
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
These are the following ways to add Tooltip line breaks:
In this approach, we are using an array within the tooltip's label callback function in Chart.js to display multiple lines of text in the tooltip. Each item in the array corresponds to a separate line, allowing us to include additional contextual information, such as the programming language, number of tutorials, and the source.
Syntax:
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return [
'Line 1: ' + context.label,
'Line 2: ' + context.raw,
'Line 3: Additional info'
];
}
}
}
}Example: The below example uses Array for Multiple Lines in Tooltips.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tooltip line break</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
canvas {
max-width: 400px;
max-height: 400px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h3>Using Array for Multiple Lines in Tooltips</h3>
<canvas id="chart2"></canvas>
<script>
const data2 = {
labels: ['JavaScript', 'Python', 'Java', 'C++'],
datasets: [{
label: 'Tutorials Published',
data: [300, 400, 350, 280],
backgroundColor: '#2196f3',
borderColor: '#1976d2',
borderWidth: 1
}]
};
const config2 = {
type: 'bar',
data: data2,
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
label: function (context) {
return [
'Language: ' + context.label,
'Tutorials: ' + context.raw,
'Source: GeeksforGeeks'
];
}
}
}
}
}
};
const chart2 = new Chart(
document.getElementById('chart2'),
config2
);
</script>
</body>
</html>
Output:
OutputIn this approach, we are using the footer callback in the Chart.js tooltip configuration to customize the tooltip's footer content. By using the footer callback, we can add additional details or formatting to the tooltip, such as displaying a custom message on a new line.
Syntax:
options: {
plugins: {
tooltip: {
callbacks: {
footer: function(tooltipItems) {
// footer content
return 'Custom footer content';
}
}
}
}
}Example: The below example uses Footer Callback to add Line Breaks in Chartjs Tooltip.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tooltip line break</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
</script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
canvas {
max-width: 400px;
max-height: 400px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h3>Using `footer` Callback</h3>
<canvas id="lineChart2"></canvas>
<script>
const data2 = {
labels: ['May', 'Jun', 'Jul', 'Aug'],
datasets: [{
label: 'Expenses',
data: [100, 150, 200, 250],
borderColor: '#2196f3',
fill: false
}]
};
const config2 = {
type: 'line',
data: data2,
options: {
responsive: true,
plugins: {
tooltip: {
callbacks: {
footer: function (tooltipItems) {
return tooltipItems.map(item =>
'Details: ' + item.raw).join('\n');
}
}
}
}
}
};
const lineChart2 = new Chart(
document.getElementById('lineChart2'),
config2
);
</script>
</body>
</html>
Output:
Output
Similar Reads
How to Hide y Axis Line in ChartJs ? In Chart.JS we can display our information in visual forms. For the customization of the chart, we can remove or hide the Y-axis line from the Chart appearance as per the requirement. We can use two different approaches to hide the y-axis line in the Chart.JS. We will see the practical implementatio
3 min read
How to Add ChartJS in NextJS 13? Chart.js in Next.js is the package used to create interactive and visually appealing charts, such as line charts, bar charts, and more, seamlessly integrated into Next.js applications. In this article, we will explore the demonstration of various charts in the NextJS application. Table of Content Im
3 min read
How To Remove Line Chart Fill in ChartJS? In Chart.js, the fill property for Line Chart allows you to control whether the area under the line is filled with color. By default, this property is set to true, which means the area below the line is filled. However, you might want to remove this fill for a cleaner look or to highlight only the l
3 min read
How to Implement Line Chart using ChartJS ? In this article, we will learn to implement a line chart using the Chart JS CDN library.A line chart is a chart that helps in plotting data points on a line. It is used to show data that is in some current trend or some change in information with time or the comparison of two data sets. It connects
3 min read
What is a tooltip and how to create it in Bootstrap ? A Tooltip is like a balloon or also a small screen tip that displays text description to any object. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applications like Ado
3 min read
How to Show Labels on Pie Chart in ChartJS ? Pie charts are an attractive way to represent data in an easy-to-understand manner. In the pie chart, the labels are very useful because, with the help of the labels, we can understand what type of data is represented in the chart. Below are the different approaches to show labels on a pie chart: Ta
5 min read