Want to show the dataset labels - charts

Question

I am trying ChartJS line chart with a set of data.I have multiple lines in it. I want to show the tooltip for the data. but I am not able to.
My code is
new Chart(canvas).Line(data,{
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
showTooltips:true
});
currently my view of line chart is
What I want is like enter image description here

Answer 1

You can use the custom tooltips option. The below code is adapted from the example at https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html
Preview
CSS
#canvas-holder {
width: 500px;
height: 300px;
}
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
font-size: 12px;
color: white;
padding: 5px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
}
.chartjs-tooltip-section{
padding: 1px;
}
HTML
<div id="canvas-holder">
<canvas id="chart" />
</div>
<div id="chartjs-tooltip"></div>
Script
function CustomLabel(short, long) {
this.short = short;
this.long = long;
}
CustomLabel.prototype.toString = function () {
return this.short;
}
var data = {
labels: [
new CustomLabel("January", "January 11"),
new CustomLabel("February", "February 12"),
new CustomLabel("March", "March 13"),
new CustomLabel("April", "April 14"),
new CustomLabel("May", "May 15"),
new CustomLabel("June", "June 16"),
new CustomLabel("July", "July 17")],
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]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("chart").getContext("2d");
new Chart(ctx).Line(data, {
responsive: true,
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
var innerHtml = ['<div class="chartjs-tooltip-section">',
' <span>' + tooltip.title.long + '</span>',
'</div>'
].join('');
for (var i = tooltip.labels.length - 1; i >= 0; i--) {
innerHtml += [
'<div class="chartjs-tooltip-section">',
' <span style="color:' + tooltip.legendColors[i].fill + '">' + data.datasets[i].label + ': ' + tooltip.labels[i] + '</span>',
'</div>'
].join('');
}
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontStyle: tooltip.fontStyle,
});
}
});
Fiddle - http://jsfiddle.net/fLm8c5ee/