[Chartjs]-How to show tooltips always on Chart.js 2

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

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

Leave a comment