How to show tooltips always on Chart.js 2

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.

Answers:

Answer

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.