Tooltip
WARNING
The bubble, doughnut, pie, polar area, and scatter charts override the tooltip defaults. To change the overrides for those chart types, the options are defined in Chart.overrides[type].plugins.tooltip
.
Possible modes are:
'average'
'nearest'
'average'
mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest'
will place the tooltip at the position of the element closest to the event position.
New modes can be defined by adding functions to the Chart.Tooltip.positioners
map.
Example:
Tooltip Alignment
The xAlign
and yAlign
options define the position of the tooltip caret. If these parameters are unset, the optimal caret position is determined.
'left'
'center'
'right'
The following values for the yAlign
setting are supported.
'top'
'center'
'bottom'
Text Alignment
The titleAlign
, bodyAlign
and footerAlign
options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.
'left'
(default)'right'
'center'
These options are only applied to text lines. Color boxes are always aligned to the left edge.
Allows sorting of tooltip items. Must implement at minimum a function that can be passed to . This function can also accept a third parameter that is the data object passed to the chart.
Filter Callback
Allows filtering of . Must implement at minimum a function that can be passed to Array.prototype.filter (opens new window). This function can also accept a fourth parameter that is the data object passed to the chart.
Namespace: options.plugins.tooltip.callbacks
, the tooltip has the following callbacks for providing text. For all functions, this
will be the tooltip object created from the Tooltip
constructor.
Namespace: data.datasets[].tooltip.callbacks
, items marked with Yes
in the column Dataset override
can be overridden per dataset.
Name | Arguments | Return Type | Dataset override | Description |
---|---|---|---|---|
beforeTitle | TooltipItem[] | string | string[] | Returns the text to render before the title. | |
title | TooltipItem[] | string | string[] | Returns text to render as the title of the tooltip. | |
afterTitle | TooltipItem[] | string | string[] | Returns text to render after the title. | |
beforeBody | TooltipItem[] | string | string[] | Returns text to render before the body section. | |
beforeLabel | TooltipItem | string | string[] | Yes | Returns text to render before an individual label. This will be called for each item in the tooltip. |
label | TooltipItem | string | string[] | Yes | Returns text to render for an individual item in the tooltip. |
labelColor | TooltipItem | object | Yes | Returns the colors to render for the tooltip item. more… |
labelTextColor | TooltipItem | Color | Yes | Returns the colors for the text of the label for the tooltip item. |
labelPointStyle | TooltipItem | object | Yes | Returns the point style to use instead of color boxes if usePointStyle is true (object with values pointStyle and rotation ). Default implementation uses the point style from the dataset points. |
afterLabel | TooltipItem | string | string[] | Yes | Returns text to render after an individual label. |
afterBody | TooltipItem[] | string | string[] | Returns text to render after the body section. | |
beforeFooter | TooltipItem[] | string | string[] | Returns text to render before the footer section. | |
footer | TooltipItem[] | string | string[] | Returns text to render as the footer of the tooltip. | |
afterFooter | TooltipItem[] | string | string[] | Text to render after the footer section. |
Label Callback
The label
callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a '$'
before every row.
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
}
return label;
}
}
}
}
}
For example, to return a red box with a blue dashed border that has a border radius for each item in the tooltip you could do:
Label Point Style Callback
For example, to draw triangles instead of the regular color box for each item in the tooltip you could do:
const chart = new Chart(ctx, {
data: data,
options: {
plugins: {
tooltip: {
usePointStyle: true,
callbacks: {
labelPointStyle: function(context) {
return {
pointStyle: 'triangle',
rotation: 0
};
}
}
}
}
}
});
Tooltip Item Context
The tooltip items passed to the tooltip callbacks implement the following interface.
External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The external
option takes a function which is passed a context parameter containing the chart
and tooltip
. You can enable external tooltips in the global or chart configuration like so:
const myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
plugins: {
tooltip: {
// Disable the on-canvas tooltip
enabled: false,
external: function(context) {
// Tooltip Element
let tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
const titleLines = tooltipModel.title || [];
const bodyLines = tooltipModel.body.map(getBody);
let innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
const colors = tooltipModel.labelColors[i];
let style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
const span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
let tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
const position = context.chart.canvas.getBoundingClientRect();
const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.font = bodyFont.string;
tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
}
});
See for examples on how to get started with external tooltips.
The tooltip model contains parameters that can be used to render the tooltip.