3

How can I show tooltips always using Chart.js version 2 (alpha)?

I have tried this Chart.js - Doughnut show tooltips always?, but seems that this have changed in this last version.

Community
  • 1
  • 1
VictorArcas
  • 630
  • 2
  • 7
  • 23
  • What did you do eventually? Does any of the answers below solve your case? If so, you could accept the one that does. If not, you could supply your own answer, I guess. – xnakos Jun 07 '16 at 13:42

2 Answers2

5

You need to loop through the datasets and point and create tooltips in onAnimationComplete (setting the events array to an empty array won't work).

Just like before you have to remove the events from the events array so that the tooltips don't disappear once you mouseover and mouseout, but in this case you need to set events to false.

Also, I think the version in dev when I last checked had a problem with onAnimationComplete not triggering unless the animation duration was 0.

Here is the relevant code

var config = {
    type: 'pie',
    options: {
        events: false,
        animation: {
            duration: 0
        },
        onAnimationComplete: 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]
                    }, self);

                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    },

Fiddle - https://jsfiddle.net/c8Lk2381/

enter image description here

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Thanks! I got _Uncaught TypeError: Cannot read property 'chartArea' of undefined_ and had to add `.. Chart.Tooltip({_chartInstance: self, ...` to get it working. The callback had to be set to `options.animation.onComplete` too. Using branch v2.0-dev 5.3.2016 – Macke Mar 05 '16 at 15:57
  • Mr. Peelings, I could not make this work for the current stable version of Chart.js. Do you happen to know what changes are needed? There is a... relevant question here: http://stackoverflow.com/questions/38465624/chartjs-labels-and-legend. And a relevant question of mine here: http://stackoverflow.com/questions/37685285/show-the-tooltip-of-a-specific-point-in-a-line-chart-after-the-initial-animation. Any help would be greatly appreciated! – xnakos Jul 20 '16 at 10:43
  • @xnakos - check out https://github.com/chartjs/Chart.js/issues/1861 for the pie chart. I think GitHub has ones for line and bar too. – potatopeelings Jul 20 '16 at 23:47
  • Thank you for the excellent response! It seems fine for all kinds of charts. Since it is your code, maybe you could go on and post some answers. Here is a quick fiddle for a line chart based on your code: https://jsfiddle.net/y0ujvnbj/ (Chart.js 2.1.6). Rock on! – xnakos Jul 21 '16 at 11:24
  • 1
    http://jsfiddle.net/tk31rehf/10/ (from etimberg's comment in https://github.com/chartjs/Chart.js/issues/1861) – potatopeelings Nov 22 '16 at 22:40
  • @LauraNMS check this answer. http://stackoverflow.com/questions/25661197/chart-js-doughnut-show-tooltips-always/42272340#42272340. It will help you to show all the tooltips in chartjs versions > 2.1.5 – Suhaib Janjua Feb 16 '17 at 11:32
  • Is it possible to only show it for one dataset? @potatopeelings – RP12 Jul 14 '17 at 18:16
  • @RP12 - just put an `if` condition in the `function (dataset, datasetIndex) {` function to exit if the datasetIndex is not the one you want. – potatopeelings Jul 16 '17 at 23:44
  • @potatopeelings I am having a similar issue but I am using Angular Chart which uses chart.js and appreciate if you can give working fiddler link with Chart 2.7.0 version. – Ravi Khambhati Oct 03 '17 at 15:56
5

This worked for me:

 events: [],
    animation: {
        duration: 0,
        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({
                        _chartInstance: self,
                        _chart: self.chart,
                        _data: self.data,
                        _options: self.options,
                        _active: [element]
                    }, self);
                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    }
Fagner Guimarães
  • 51
  • 1
  • 2