score:1

Accepted answer

different labels in tooltip vs scale

just use the tooltiptemplate option

preview

enter image description here


script

function label(short, long) {
  this.short = short;
  this.long = long
}
label.prototype.tostring = function() {
  return this.short;
}

var data = {
    labels: [ 
      new label("j", "jan"), 
      new label("f", "feb"), 
      new label("m", "mar"),
      new label("a", "apr"),
      new label("m", "may"),
      new label("j", "jun"),
      new label("j", "jul")
    ],
    datasets: [
        {
            label: "my first dataset",
            fillcolor: "rgba(220,220,220,0.5)",
            strokecolor: "rgba(220,220,220,0.8)",
            highlightfill: "rgba(220,220,220,0.75)",
            highlightstroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

// create chart
var ctx = document.getelementbyid("chart").getcontext('2d');
new chart(ctx).bar(data, {
  tooltiptemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
});


fiddle - https://jsfiddle.net/7z1s1feg/

score:0

this part of the documentation explain you how to extend the tooltips elements.

var mypiechart = new chart(ctx).pie(data, {
    customtooltips: function(tooltip) {

    };
});

plus, this example show you how to modify the html of the tooltip inside this function. the example from github :

var innerhtml = '';
    for (var i = tooltip.labels.length - 1; i >= 0; i--) {
        innerhtml += [
            '<div class="chartjs-tooltip-section">',
            '   <span class="chartjs-tooltip-key" style="background-color:' + tooltip.legendcolors[i].fill + '"></span>',
            '   <span class="chartjs-tooltip-value">' + tooltip.labels[i] + '</span>',
            '</div>'
        ].join('');
    }
    tooltipel.html(innerhtml);

with these elements, you will be able to customize your tooltips however you want.


Related Query

More Query from same tag