9👍
As of v2.4, the callbacks unfortunately don’t allow for HTML currently. You’ll need to write a custom tooltip function.
Examples can be found in the samples folder for chart-js (although some are better than others I found).
https://github.com/chartjs/Chart.js/tree/v2.4.0/samples/tooltips
Try running the samples to get a feel for how the options and modifications affect the tooltip function.
For example in the line chart example of a custom function:
Chart.defaults.global.pointHitDetectionRadius = 1;
var customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>"
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
//PUT CUSTOM HTML TOOLTIP CONTENT HERE (innerHTML)
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._fontFamily;
tooltipEl.style.fontSize = tooltip.fontSize;
tooltipEl.style.fontStyle = tooltip._fontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
};
Then set this as the custom tooltip function in the options for the chart:
window.myLine = new Chart(chartEl, {
type: 'line',
data: lineChartData,
options: {
title:{
display:true,
text:'Chart.js Line Chart - Custom Tooltips'
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
//Set the name of the custom function here
custom: customTooltips
}
}
});
EDIT: Apologies, I only read the title of your question, not the full question. What you ask can be done more simply and without HTML in the tooltips (unless it’s required for another reason) by changing the interaction mode to index in the options. There’s a sample available to show how this works.
- [Chartjs]-How to modify bar width in Chartjs 2 bar charts
- [Chartjs]-How to use percentage scale with Chart.js
3👍
Good, although with the previous solution to solve the problem I think that the solution offered by chart.js is a bit … Confusing. The same can be applied in a more understandable way. Based on the chart.js guide I have created an HTML that will be used in the tooltip. What I got was the following:
First I give you the code used and then I explain it:
tooltip: {
// Disable the on-canvas tooltip
enabled: false,
external: (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 (above, below,no-transform ).As I need above I don't delete that class
tooltipEl.classList.remove('below', 'no-transform');
// Set HTML & Data
if (tooltipModel.body) {
const dataFromCurrentElement = tooltipModel.dataPoints[0];
const currentElement = dataFromCurrentElement.dataIndex;
const formattedValue = dataFromCurrentElement.formattedValue.trim();
const currentDataToShow = formattedValue.substr(1, formattedValue.length - 2).split(' ');
const innerHtml = `
<div style="border-collapse: separate; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,.175);">
<div style="background-color: #ECEFF1; padding-top: 5px; padding-bottom: 6px; padding-left: 7px; color: #000; font-family: 'Poppins'; font-size: 14px; border-bottom: solid 1px #DDD">
Name
</div>
<div style="display: flex; padding: 1.2rem; background-color: white">
<div style="display: flex; margin-right: 1.2rem;align-items: center; ">
<div style="border-radius: 100%; background-color: #6785C1; height: 13px; width: 13px;"></div>
</div>
<div style="display: flex; flex-direction: column; font-family: 'Poppins'; font-size: 14px">
<div>Revenue: <span style="font-weight: 600">${currentDataToShow[0].substr(0, currentDataToShow[0].length - 1)}</span></div>
<div>Revenue per employee: <span style="font-weight: 600">${currentDataToShow[1].substr(0, currentDataToShow[1].length - 1)}</span></div>
<div>Net income per employee: <span style="font-weight: 600">${this.customReportUtilities.parseNumberFunction(Number(currentDataToShow[2]) * 100)}</span></div>
</div>
</div>
</div>
`;
tooltipEl.querySelector('table').innerHTML = innerHtml;
}
const position = context.chart.canvas.getBoundingClientRect();
// 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.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
This is the same code, it is not necessary to duplicate it, with the above it is worth
-
We hide the tooltip from chartjs using tooltip false, then in external we pass the function to use our HTML as tooltip
let tooltipEl = document.getElementById('chartjs-tooltip'); -
We collect the container with id chartjs-tooltip, if it does not exist (the mouse had not been placed on the graph) we create it (it is the following if).
let tooltipEl = document.getElementById('chartjs-tooltip'); if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = '<table></table>'; document.body.appendChild(tooltipEl); } -
We hide the tooltip when the user does not have the cursor over an element (this is because otherwise it would always be seen.
const tooltipModel = context.tooltip; if (tooltipModel.opacity === 0) { tooltipEl.style.opacity = '0'; return; } -
We indicate the position of the tooltip, to choose between above, below or no-transform. I have removed all but above because it is the class I want to keep.
tooltipEl.classList.remove('below', 'no-transform');
-
We get the data for the current element and form the HTML with its styles … Saving it in a variable as a string and we pass it our string with the HTML.
if (tooltipModel.body) { const dataFromCurrentElement = tooltipModel.dataPoints[0]; const currentElement = dataFromCurrentElement.dataIndex; const formattedValue = dataFromCurrentElement.formattedValue.trim(); const currentDataToShow = formattedValue.substr(1, formattedValue.length - 2).split(' '); const innerHtml = ` <div style="border-collapse: separate; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,.175);"> <div style="background-color: #ECEFF1; padding-top: 5px; padding-bottom: 6px; padding-left: 7px; color: #000; font-family: 'Poppins'; font-size: 14px; border-bottom: solid 1px #DDD"> Name </div> <div style="display: flex; padding: 1.2rem; background-color: white"> <div style="display: flex; margin-right: 1.2rem;align-items: center; "> <div style="border-radius: 100%; background-color: #6785C1; height: 13px; width: 13px;"></div> </div> <div style="display: flex; flex-direction: column; font-family: 'Poppins'; font-size: 14px"> <div>Revenue: <span style="font-weight: 600">${currentDataToShow[0].substr(0, currentDataToShow[0].length - 1)}</span></div> <div>Revenue per employee: <span style="font-weight: 600">${currentDataToShow[1].substr(0, currentDataToShow[1].length - 1)}</span></div> <div>Net income per employee: <span style="font-weight: 600">${this.customReportUtilities.parseNumberFunction(Number(currentDataToShow[2]) * 100)}</span></div> </div> </div> </div> `; tooltipEl.querySelector('table').innerHTML = innerHtml; } -
Finally we finish configuring the container
const position = context.chart.canvas.getBoundingClientRect();
// 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.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px'; tooltipEl.style.pointerEvents = 'none';
I have had to use some additional styles as an overflow to make the border-radius show. Chart.js documentation on the subject: https://www.chartjs.org/docs/latest/samples/tooltip/html.html
- [Chartjs]-How to set axes' step size in Chart.js 2?
- [Chartjs]-ChartJS Line Charts – remove color underneath lines