score:10

Accepted answer

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"
});

score:1

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, ",");
}

score:1

the great previous answers do not work with chartjs 3. this example is from the official documentation:

const chart = new chart(ctx, {
type: 'line',
data: data,
options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    const label = context.dataset.label || '';

                    if (label) {
                        label += ': ';
                    }
                    if (context.parsed.y !== null) {
                        label += new intl.numberformat('en-us', { style: 'currency', currency: 'usd' }).format(context.parsed.y);
                    }
                    return label;
                }}}}}});

score:23

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.


Related Query

More Query from same tag