Chart.js: How do I get tooltips to always show in V2?

[andi-b]

I've managed to get this working in V1 and have found an example of it working in V2 alpha, but I can't seem to get it working in the latest beta.

I may eventually want to always show one particular tooltip, but hoping I can figure that out later.

animation: {

                    onComplete: function () {
                        var self = this;
                        var elementsArray = [];
                        Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                            Chart.helpers.each(dataset.metaData, function (element, index) {                                                               
                                var tooltip = new Chart.Tooltip({
                                    _chart: self.chart,
                                    _data: self.data,
                                    _options: self.options,
                                    _active: element,
                                   _view: element._view
                                }, self);
                                tooltip.update();
                                tooltip.draw();
                            }, self);
                        }, self);
                    }
                }

Here's an example of it working in V2 alpha: https://jsfiddle.net/c8Lk2381/

Thanks in advanced.

[potatopeelings]

@andi-b - as a temporary workaround, you can use the new pluginService to do this. Here's a fiddle doing that http://jsfiddle.net/q15ta78q/ (yaay pluginService!)

Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options.showAllTooltips) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options,
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }

            // turn on tooltips
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
        }
    }
})

and then

new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        showAllTooltips: true
        ...

[etimberg]

@potatopeelings that's a great use of the plugin service!

[Atmos206]

@potatopeelings This worked great for me! Thank you!!!

[ghost]

No longer works in version 2.1.6.
http://jsfiddle.net/syvpqfne
Error: TypeError: callbacks is undefined ::: Chart.js (Row 7755)

[etimberg]

@biiwii updated here: http://jsfiddle.net/tk31rehf/
The options object passed to the tooltip changed

[ghost]

@etimberg ::: sorry, so easy. thank you!

[paulhuisman]

I wonder why this isn't a default option..

[lookfirst]

What if I want to display tooltips based on an outside event other than hovering over the chart? I'd love to be able to pass an x,y into something and have it show the tooltip.

[xantari]

How do you make it so that the label is not shown when you click one of the labels on the legend which will hide that data from the pie chart? As in this example: http://jsfiddle.net/tk31rehf/

When you click the legend "Green", it removes the green from the pie chart, but still shows the tooltip. How do you get it to hide the green tooltip on green in that scenario?

[htmllancer]

Hi! How can I do this through Angular-chart-js?

[lschneiderman]

I'm using chartjs 2.4.0. I copied the code above:
[Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})]

Then implemented it:
var ctx = document.getElementById("chrtWhoPays");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Payer1", "Payer2", "Payer3", "Payer4", "Payer5", "Payer6"],
datasets: [{
data: [51.9, 22.3, 15.7, 7.9, 0.6, 1.6],
backgroundColor: [
'#333',
'#547b84',
'#2faea9',
'#a2d5ab',
'#433c3b',
'#e4efc1'
]
}]
},
options: {
responsive: true,
showAllTooltips: true

    }
});

But I get the error message "Chart.Tooltip.positioners[opts.position] is not a function".

What am I doing wrong?

[fernandocode]

@xantari , for your pointed problem add the check if the item is visible before forcing the tooltip to display (tooltip._active[0].hidden).

As can be seen from the change in line 60 of this example.

[fernandocode]

@lschneiderman. As @etimberg mentioned earlier, you have to change line 37 from _options: chart.options to _options: chart.options.tooltips to be compatible with version after 2.1.6.

The following example works in version 2.4.0.

Note: In 2.4.0 it has changed from Chart.pluginService.register to Chart.plugins.register

[lschneiderman]

@fernandocode: I had to do this:

options: { showAllTooltips: true, }

Then add this code:

Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { chart.pluginTooltips = []; chart.config.data.datasets.forEach(function(dataset, i) { chart.getDatasetMeta(i).data.forEach(function(sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: chart.options.tooltips, _active: [sector] }, chart)); }); }); // turn off normal tooltips chart.options.tooltips.enabled = false; } }, afterDraw: function(chart, easing) { if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once if (!chart.allTooltipsOnce) { if (easing !== 1) return; chart.allTooltipsOnce = true; } chart.options.tooltips.enabled = true; Chart.helpers.each(chart.pluginTooltips, function(tooltip) { tooltip.initialize(); tooltip.update(); // we don't actually need this since we are not animating tooltips tooltip.pivot(); tooltip.transition(easing).draw(); }); chart.options.tooltips.enabled = false; } } });

[tlaredo]

Hello, thanks for the excellent plugin! Quick question... does anyone know how to prevent tooltips from overlapping if they're always showing? See example below. Thanks! 😄

[dhniels]

Did ChartJS ever implement this as a default option? seems like very common use case. Anyone that has got this working using angular2-chartjs? Im trying to figure this out.

[jack100501]

@lschneiderman, how to use this plugin in Angular?
I tried to put it strait in controller. no errors. but as only I added showAllTooltips: true into chart options i got libs.1.2.201705291730.js:1 TypeError: Cannot read property 'xPadding' of undefined
I'm using Chartjs 2.1.4

That did hep me!
$scope.options = {
    events: false,
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    }
};

[lschneiderman]

@jack100501 - I haven't used angular yet - sorry.

[simonbrunel]

I know it doesn't provide the same result but I think most use cases would work better using the chartjs-plugin-datalabels. Tooltips are not really meant to be always displayed and may generate performance issues when displaying too many of them. Also, I don't think we are going to implement advanced features that handle multiple tooltips such as preventing overlap while these kind of enhancements are in progress or already done in the datalabels plugin (which is, IMO, more flexible, for example using scriptable options).

For users who still want to rely on tooltips, a few workarounds now exist in this thread so I think it's time to close this ticket. Feel free to open issues / feature requests in the datalabels repository if it makes sense.

[aimenbatool]

I am looking for a solution to a similar problem.

I want to achieve following.
Click on a tooltip data point, it should stick there until I click any other tooltip, the previous tooltip should close upon opening a new one.

Clicking and sticking tooltip is working with events: ['click'] parameter in options, but it doesn't show any data point upon hover.

Any suggestions on how to achieve it?

[danavcohen]

I use react chart js 2
how can I use the Chart?
is undefined..