So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add

tooltipTemplate: "<%= value %>% test" 

to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains pletely unchanged in reality. And ideas?

Thanks!

So I'm working with a bar graph in Chart.js, and I'm trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add

tooltipTemplate: "<%= value %>% test" 

to my options section, and that would display the word test after my data value in the resulting tooltip. However, my tooltip remains pletely unchanged in reality. And ideas?

Thanks!

• javascript
• tooltip
• chart.js

• 1 Wele to SO! Could you please add some more relevant code? It should be enough code for us to reproduce the error – n0m4d Commented Jul 27, 2016 at 20:46
• stackoverflow./help/accepted-answer - read and start accepting your answers - win-win rep-wise – Rachel Gallen Commented Jul 28, 2016 at 4:08

1 Answer 1

Here is an example of custom tooltip label:

var ctx = document.getElementById("myChart");

var barChartData = {
        labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
        datasets : [ {
            type : 'bar',
            label : "Revenue (US$)",
            data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
            backgroundColor : 'rgba(0, 0, 255, 0.3)'
        } ]
    };

var myChart = new Chart(ctx,
    {
        type : 'bar',
        data : barChartData,
        options : {
            responsive : true,
            tooltips : {

                callbacks : { // HERE YOU CUSTOMIZE THE LABELS
                    title : function() {
                        return '***** My custom label title *****';
                    },
                    beforeLabel : function(tooltipItem, data) {
                        return 'Month ' + ': ' + tooltipItem.xLabel;
                    },
                    label : function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
                    },
                    afterLabel : function(tooltipItem, data) {
                        return '***** Test *****';
                    },
                }

            },
            scales : {
                xAxes : [ {
                    display : true,
                    labels : {
                        show : true,
                    }
                } ],
                yAxes : [ {
                    type : "linear",
                    display : true,
                    position : "left",
                    labels : { show : true },
                    ticks : {
                        beginAtZero : true
                    }
                } ]
            }
        }
    });