Chartjs-Chart.js (line chart) tooltip duration/delay

by

1👍

✅

The tooltips are cleared by the showTooltip function (the redraw clears off the existing tooltips). So one naïve way would be to hook into this to introduce your delay, like so

var data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            data: [12, 23, 23, 43, 45, 12, 33]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);

var originalShowTooltip = myLineChart.showTooltip;
var timeout;
myLineChart.showTooltip = function (activeElements) {
    var delay = (activeElements.length === 0) ? 2000 : 0;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        originalShowTooltip.call(myLineChart, activeElements);
    }, delay);
}

This delays the tooltips if the chart is going to clear off all tooltips.

Notice that there is no delay in removing the old tooltip if you move on to another tooltip. If you want it this to be a delayed disappearance, you’ll need to maintain your own array of active points pushing in elements (instantaneously) / popping out elements (with a delay)

Fiddle – http://jsfiddle.net/zubynd0c/

Leave a comment