Tooltips personaliados en Chart.js 2.2

Personalizar tooltips en Chart.js era relativamente fácil en las versiones iniciales de esta librería de código abierto de javascript para generar estadísticas en nuestras webs, pero ahora en las últimas versiones (2.2) ha cambiado la manera totalmente, haciendo que haya que adaptar el código realizado con anterioridad.

Los tooltips son pequeñas etiquetas que emergen temporalmente cuando situamos el ratón encima de una gráfica de Chart.js, y para elaborarlos de forma personalizada (custom tooltips) y que no salgan los que por defecto crea Chart.js hay que introducir en las opciones de la gráfica lo que queramos mostrar.

Por ejemplo, en una gráfica de barras cualquiera que muestra totales por días, tendríamos que atender a la parte de tooltips que veréis en las opciones:

var options = {
    responsive: true,
    maintainAspectRatio: false,
    fullWidth: true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
                }
            }]
        },
    legend: {
        display: false
        },
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            title: function (tooltipItem, data) { 
                return "Día " + data.labels[tooltipItem[0].index]; 
            },
            label: function(tooltipItems, data) {
                return "Total: " + tooltipItems.yLabel + ' €';
            },
            footer: function (tooltipItem, data) { return "..."; }
        }
    }
};

var ctx = $("#stat_mes");
var st1 = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

Como podéis ver, ahora los tooltips se pueden modificar a través de callbacks de la gráfica, que hay que definir antes de invocarla. Para muchos puede resultar algo más farragoso que la anterior manera de hacerlo, que iba de manera fija con «comodines» (%value%), pero sin duda esta manera es mucho mas versátil y da mas posibilidades de personalizarlo.

8459 visitas.