Customize different tooltips of bar chart - chart.js

Question

I'm now trying to plot bar chart by chart.js.
The result as
Figure 1:
and
Figure 2:
.
I know it can use tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files" to custmize the tooltips.
But is it possible to show different text in different bar?
For example, show 12:10, 13:20 instead of tooltip 12:00~14:00: 12 Files in Fig. 1 and show 14:25 instead of 12:00~14:00: 12 Files in Fig. 2.

Answer 1

You can combine the answers from How to modify chartjs tooltip to add customized attribute and How to make tool tip contents display on multiple lines
Script
function Label(short, long) {
this.short = short;
this.long = long
}
Label.prototype.toString = function() {
return this.short;
}
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: [
new Label("J", "S JAN JAN JAN JAN JAN JAN JAN E"),
new Label("F", "S FEB E"),
new Label("M", "S MAR E"),
new Label("A", "S APR APR APR APR APR APR APR E"),
new Label("M", "S MAY E"),
new Label("J", "S JUN E"),
new Label("J", "S JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL E")
],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var myLineChart = new Chart(ctx).Bar(data, {
tooltipTemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var re = new RegExp('\b', 'g');
var innerHtml = '<span>' + parts[0].trim().replace(re, '<br/>') + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
// the minimum amount is half the maximum width of the tooltip that we set in CSS ...
// ... + the x scale padding so that it's not right at the edge
left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
});
CSS
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, -120%);
transform: translate(-50%, -120%);
max-width: 150px;
}
HTML
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
Note that I've adjusted for the left side edge. If you don't have enough space on the top or the right, you'll need to do the same for those edges as well (maximum limit for tooltip.x and limit for tooltip.y)
Fiddle - http://jsfiddle.net/69vt0091/