[Chartjs]-How to reformat tooltip in Chart.js?

by

12👍

✅

You can customize the label in callback function.

tooltips: { 
          callbacks: {
                        label: function(tooltipItem, data) {
                            return "Daily Ticket Sales: $ " + tooltipItem.yLabel;
                        },
                    }
            }

37👍

scales: {
    xAxes: [{
      type: 'time',
      time: {
          tooltipFormat:'MM/DD/YYYY', // <- HERE
          displayFormats: {
             'millisecond':'HH:mm:ss',
             'second': 'HH:mm:ss',
             'minute': 'HH:mm:ss',
             'hour': 'HH:mm:ss',
             'day': 'HH:mm:ss',
             'week': 'HH:mm:ss',
             'month': 'HH:mm:ss',
             'quarter': 'HH:mm:ss',
             'year': 'HH:mm:ss',
          }
        }
    }]
}

2👍

A bit late, but perhaps the answer by @LeonF works great, didn’t make it fully as I work with many datasets and great numbers, so if anyone needs it, here I left my code so the labels have the correct label and the formated value (I hope this helps someone):

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: _labels,
        datasets: [...]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stacked: false,
                    callback: function (label, index, labels) {
                        return '$' + label / 1000000;
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Millones de pesos'
                }
            }]
        },
        tooltips: {
            callbacks: {
                label: function (tti, data) {
                    // Here is the trick: the second argument has the dataset label
                    return '{0}: {1}'.Format(data.datasets[tti.datasetIndex].label, formatMoney(tti.yLabel));
                }
            }
        },
        title: {
            display: true,
            text: 'Avance global'
        }
    }
});

I left also my functions for String.Format:

String.prototype.format = String.prototype.Format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
        return typeof args[number] != 'undefined' ? args[number] : match;
    });
};

and for formatMoney:

function formatNumber(num) {
    if (num == 'NaN') return '-';
    if (num == 'Infinity') return '&#x221e;';
    num = num.toString().replace(/\$|\,/g, '');
    if (isNaN(num))
        num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 100;
    num = Math.floor(num / 100).toString();
    if (cents < 10)
        cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3) ; i++)
        num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
    return (((sign) ? '' : '-') + num + '.' + cents);
}
function formatMoney(num) {
    return '$' + formatNumber(num);
}

Leave a comment