How to modify chartjs tooltip so i can add customized strings in tooltips

Redefine default global tooltip template as follows:

Chart.defaults.global.tooltipTemplate =
  "<%if (label){%><%=label%>: <%}%><%= value %>";

Here is another example:

var ctx = document.getElementById("canvas").getContext("2d");

var myBarChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%= value %> Files"
});

Validated answer doesn't work anymore. For Chart.js V2,

Chart.defaults.global.tooltipTemplate

is deprecated.

Instead you can use callbacks to modify the displayed tooltips. There is a sample for the usage the possible callbacks in the documentation under Chart.defaults.global.tooltips.

In your case I would do the following:

window.myLine = new Chart(chart, {
    type: 'bar',
    data: barChartData,
    options: {
            tooltips: {
                enabled: true,
                mode: 'single',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' : ' + tooltipItems.xLabel + " Files";
                    }
                }
            },
     }       
  });

Don't forget to set the HTML meta tag:

<meta charset="UTF-8">

This answer was copy from this question.


Drawing from other responses I've found that helped me, apparently the label properties can be set to functions, For example, to format currency:

var overrides = {
  // show lables as currency
  scaleLabel: toCurrency,

  // String - Template string for single tooltips
  tooltipTemplate: toCurrency,

  // String - Template string for multiple tooltips
  multiTooltipTemplate: toCurrency
}

function toCurrency(label) {
    return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}