Is it possible to have the label & units when my mouse pointer is hover the chart ? For now there is only the number.

For the example bellow I would like to show :

• 58% Label1
• 0% Label2
• 0% Label3
• 0% Label4
• 0% Label5

My options looks like this :

var options = {
      //Boolean - Show a backdrop to the scale label
      scaleShowLabelBackdrop : true,
      //Boolean - Whether to show labels on the scale
      scaleShowLabels : true,
      // Boolean - Whether the scale should begin at zero
      scaleBeginAtZero : true,
      scaleLabel : "<%%= Number(value) + ' %'%>",
      legendTemplate: "<ul class=\"<%%=name.toLowerCase()%>-legend\"><%% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%%=datasets[i].strokeColor%>\"></span><%%if(datasets[i].label){%><%%=datasets[i].label%> <strong><%%=datasets[i].value%></strong><%%}%></li><%%}%></ul>",
      tooltipTemplate: "<%%= value %> Label"
    }

With scaleLabel option I have the % shown on the Y-axis but not on the hover pop-up...

Is it possible to have the label & units when my mouse pointer is hover the chart ? For now there is only the number.

For the example bellow I would like to show :

• 58% Label1
• 0% Label2
• 0% Label3
• 0% Label4
• 0% Label5

My options looks like this :

var options = {
      //Boolean - Show a backdrop to the scale label
      scaleShowLabelBackdrop : true,
      //Boolean - Whether to show labels on the scale
      scaleShowLabels : true,
      // Boolean - Whether the scale should begin at zero
      scaleBeginAtZero : true,
      scaleLabel : "<%%= Number(value) + ' %'%>",
      legendTemplate: "<ul class=\"<%%=name.toLowerCase()%>-legend\"><%% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%%=datasets[i].strokeColor%>\"></span><%%if(datasets[i].label){%><%%=datasets[i].label%> <strong><%%=datasets[i].value%></strong><%%}%></li><%%}%></ul>",
      tooltipTemplate: "<%%= value %> Label"
    }

With scaleLabel option I have the % shown on the Y-axis but not on the hover pop-up...

• javascript
• jquery
• ruby-on-rails
• label
• chart.js

• anything is possible. Where is the code you have tried? – Allen Tellez Commented May 19, 2015 at 20:01
• @tellez the options I tried is on the post, this is where it is supposed to be right ? I don't find on the doc the options to changes the display of the popup, all I found is about the scale – SJU Commented May 19, 2015 at 20:04
• @tellez I found that the options that might be usefull is tooltipTemplate, but when I change it, nothing happens on my chart... – SJU Commented May 20, 2015 at 5:11

2 Answers 2

I found the solution on the ChartJS repository on Github.

The solution is to use the option multiTooltipTemplate if your graph has multiple data. Otherwise, you should use tooltipTemplate

multiTooltipTemplate: "<%=datasetLabel%> : <%= value %>"  // Regular use
// or
multiTooltipTemplate: "<%%=datasetLabel%> : <%%= value %>"  // Ruby on Rails use

Will give you :

• Dataset_label : value

Try this one, it will work. You just need to check what's the data coming in the label function.

options: {
  tooltips: {
    callbacks: {
      title: function() {
        return "";
      },
      label: function(item, data) {
        var datasetLabel = data.datasets[item.datasetIndex].label || "";
        var dataPoint = item.yLabel;
        return datasetLabel + ": " + dataPoint + "min";
      }
    }
  }
}