How to show tooltips always on Chart.js 2

javascript canvas charts chart.js

18,719

Solution 1

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);
        }
    }

Solution 2

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

18,719

Author by

VictorArcas

Updated on June 25, 2022

Comments

VictorArcas almost 2 years

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.
Macke about 8 years

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
xnakos almost 8 years

Hi! Would it be possible to provide a minimal working jsfiddle?
xnakos almost 8 years

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: stackoverflow.com/questions/38465624/chartjs-labels-and-lege‌nd. And a relevant question of mine here: stackoverflow.com/questions/37685285/…. Any help would be greatly appreciated!
potatopeelings almost 8 years

@xnakos - check out github.com/chartjs/Chart.js/issues/1861 for the pie chart. I think GitHub has ones for line and bar too.
xnakos almost 8 years

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: jsfiddle.net/y0ujvnbj (Chart.js 2.1.6). Rock on!
potatopeelings over 7 years

jsfiddle.net/tk31rehf/10 (from etimberg's comment in github.com/chartjs/Chart.js/issues/1861)
Suhaib Janjua about 7 years

@LauraNMS check this answer. stackoverflow.com/questions/25661197/…. It will help you to show all the tooltips in chartjs versions > 2.1.5
RP12 almost 7 years

Is it possible to only show it for one dataset? @potatopeelings
potatopeelings almost 7 years

@RP12 - just put an if condition in the function (dataset, datasetIndex) { function to exit if the datasetIndex is not the one you want.
Ravi Khambhati over 6 years

@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.