Customizing Chart.js tool tips - tooltip

Question

<script>
var passings = [["New York","5001","05/18 00:36","S 28 MPH"], ["Phili","5002","05/18 01:36","S 50 MPH"], ["Richmond","5003","05/18 02:36","S 40 MPH"], ["Wilson","5004","05/18 03:36","S 30 MPH"],
["Savannah","5005","05/18 04:36","S 29 MPH"], ["Miami","5006","05/18 05:36","S 40 MPH"]]
leftK1 = ["20","30","50","20","30","40"]
var labelL1 = "Rain %";
var ctx = document.getElementById("myChart").getContext("2d");
var canvasWidth = 600;
ctx.canvas.width = canvasWidth;
ctx.canvas.height = 700;
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontFamily = "Lato, sans-serif";
var chartData = null;
var chartOptions = null;
var chartDataSets = [ {
label : labelL1,
fill : false,
data : leftK1,
borderColor : 'rgb(255, 99, 132)'
} ];
chartData = {
labels : passings,
datasets : chartDataSets
}
chartOptions = {
responsive : true,
maintainAspectRatio : false,
elements : {
line : {
tension : 0, // disables bezier curves
}
},
animation : {
},
legend : {
display : true,
position : 'top',
labels : {
fontColor : 'rgb(255, 99, 132)'
}
},
title : {
display : true,
text : 'Passings Chart'
},
scales : {
yAxes : [ {
ticks : {
max : 80,
min : 0
},
gridLines : {
zeroLineWidth : 5
},
scaleLabel : {
display : true,
labelString : "Rain Percantage",
fontFamily : "Lato, sans-serif",
fontSize : 18
}
} ],
xAxes : [ {
ticks : {
autoSkip : false,
maxTicksLimit : 15,
maxRotation : 0,
minRotation : 0,
fontFamily : "Lato, sans-serif",
fontSize : 12
}
} ]
}
// end scales
}
window.myChart = new Chart(ctx, {
type : 'line',
data : chartData,
options : chartOptions
});
</script>
<h:form id="ChartForm">
<div >
<canvas id="myChart" ></canvas>
</div>
</h:form>
enter image description hereI have passed Labels as an array to the chart (Chart.js version 2.7) so that I have multiple rows of X-Axis Labels. While displaying as tool tip, it is displaying whole array for each tool tip. I have seen several postings where they gave ways to display values from legend and and customizing Y-axis data.
Is there a way to display a short form of Label (X-axis label) as tooltip ?

Answer 1

You can use Callbacks as it is mentioned in Chart.js Documentatoin
You can even customize your tooltips for example:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
// Tooltip Element
var 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
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || [];
var bodyLines = tooltipModel.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltipModel.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
}
}
}
});
See the Samples
and more