Chart.js Tooltip Configuration

Last Updated : 24 Nov, 2023

When a user hovers over a data point in Chart.js, tooltips are visual UI components that offer additional information about the data point. By default, tooltips will show the label and value of the data point, but you may edit them to alter their appearance (styles) or to show different information depending on the user. In this article, we will see the Tooltip Configuration in Chart.js, along with understanding their basic implementation through the examples.

Tooltip Configuration

Tooltip configuration options are defined in the options.plugins.tooltip object in the chart configuration. Here is the list of the tooltip config options:

enabled: Tooltips are enabled or disabled based on this setting.
external: It decided to use an external tooltip element instead of the one on the canvas.
position: It determines the tooltip’s location in relation to the data points of the chart.
intersect: This property takes only a boolean value (True or False) which means the tooltip will be displayed only when the element and mouse cursor position intersect.
callbacks: A variety of callback functions are available for updating the tooltip’s content.
itemSort: It is a function in which tooltip items have been sorted.
filter: It is a function in which tooltip items have been filtered.
caretPadding: This property takes only a numeric value that represents the extra space needed to move the tooltip arrow’s end away from the tooltip location.
caretSize: This property takes only numeric value for size, in px, of the tooltip.
backgroundColor: changes the background color of the tooltip box.
titleColor: It changes the color of the title on the tooltip box.
bodyColor: It changes the color of the body text on the tooltip box.
titleFont: It changes the font of the title text on the tooltip box.
padding: This property adds a quantity of empty space to all the edges of the tooltip box.
displayColors: This property takes only a boolean value (True or False) which means color boxes will be shown on the tooltip box.
boxWidth: It changes the width of the color box in the tooltip.
boxHeight: It changes the height of the color box in the tooltip.
boxPadding: The quantity of empty space between the text and the color box.
cornerRadius: It sets the corners (rounded) of the tooltip box (border-radius).
borderColor: It changes the color of the border presented outside of the tooltip box.
borderWidth: It changes the thickness of the border on the tooltip box.
xAlign: It changes the location of the tooltip box horizontally. (left, center, right).
yAlign: It changes the location of the tooltip box vertically (top, center, bottom).

CDN Link

<script src=
"https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/chart.js">
</script>

Syntax

new Chart(ctx, {
    type: "line",
    data: {
    
        // Labels and data
    },
    options: {
        plugins: {
            tooltip: {
            
                // Tooltip config options
            },
        },
    },
});

Example 1: This example describes the Simple tooltip configuration (customizing styles).

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Chart.js with Tooltips Config</title> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js"> 
      </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js"> 
      </script> 
</head> 
  
<body style="text-align: center;"> 
    <h2 style="color: green"> 
          GEEKSFORGEEKS Chart.js tooltip configuration 
      </h2> 
    <div style="width: 1000px"> 
        <canvas id="myTooltip"></canvas> 
    </div> 
  
    <script> 
        const chart =  
              document.getElementById("myTooltip"); 
        new Chart(chart, { 
            type: "line", 
            data: { 
                labels: ["January", "February", "March", 
                         "April", "May"], 
                datasets: [ 
                    { 
                        label: "Sales", 
                        data: [30, 40, 50, 10, 20], 
                        borderWidth: 2, // Width of the line border 
                        borderColor: "green", // Color of the line border 
                    }, 
                ], 
            }, 
            options: { 
                plugins: { 
                    tooltip: { 
                        enabled: true, 
                        backgroundColor: "#9cbba1", 
                        titleColor: "#042a0b", 
                        bodyColor: "#042a0b", 
                        titleFont: { weight: 'bold' }, 
                        padding: 10, 
                        cornerRadius: 10, 
                        borderColor: "#042a0b", 
                        borderWidth: "2", 
                        xAlign: "left" 
                    }, 
                }, 
            }, 
        }); 
    </script> 
</body> 
  
</html>

Explanation:

When a user hovers over a data point, the default tooltip, which displays the label and value, will be enabled. However, the tooltip’s styles can be changed using some properties, including backgroundColor, titleColor, bodyColor, titleFont, padding, cornerRadius, borderColor, and borderWidth.

Output:

Example 2: This example illustrates the Custom tooltip configuration (customizing data).

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Chart.js with Tooltips Config</title> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js@latest/dist/chart.min.js"> 
      </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js"> 
      </script> 
</head> 
  
<body style="text-align: center;"> 
    <h2 style="color: green"> 
          GEEKSFORGEEKS Chart.js tooltip configuration 
      </h2> 
    <div style="width: 1000px"> 
        <canvas id="myTooltip"></canvas> 
    </div> 
  
    <script> 
        const chart = 
              document.getElementById("myTooltip"); 
        new Chart(chart, { 
            type: "line", 
            data: { 
                labels: ["January", "February",  
                         "March", "April", "May"], 
                datasets: [ 
                    { 
                        label: "Sales", 
                        data: [20, 10, 40, 50, 30], 
                        borderWidth: 2, // width of the line border 
                        borderColor: "green", // color of the line border 
                    }, 
                ], 
            }, 
            options: { 
                plugins: { 
                    tooltip: { 
                        enabled: true, 
                        callbacks: { 
                            label: function (tooltipData) { 
                                const labels =  
                                      tooltipData.dataset.label.toString(); 
                                const values = 
                                  tooltipData.dataset.data[tooltipData.dataIndex]; 
                                const result =  
                                      tooltipData.dataset.data.reduce( 
                                    (var1, var2) => var1 + var2, 
                                    0 
                                ); 
                                const percentage =  
                                      ((values / result) * 100).toFixed(2) + "%"; 
  
                                return `${labels}: ${values} (${percentage})`; 
                            }, 
                        }, 
                        backgroundColor: "#9cbba1", 
                        titleColor: "#042a0b", 
                        bodyColor: "#042a0b", 
                        titleFont: { weight: "bold" }, 
                        padding: 10, 
                        cornerRadius: 10, 
                        borderColor: "#042a0b", 
                        borderWidth: "2", 
                    }, 
                }, 
            }, 
        }); 
    </script> 
</body> 
  
</html>

Explanation:

In the code above, a specific tooltip callback function is defined. This function’s input, the tooltipData object, which includes information about the data point the tooltip is for, is necessary. This function calculates the percentage of the data point’s total sales and then returns a string with the labels, values, and percentage of the data point.

When a user hovers over a data point on the chart, the custom tooltip callback method will be invoked to provide the tooltip content. The labels, values, and percentages for the chosen data point are then displayed to the user in a tooltip.

Output: