Chartjs-Chartjs v2.8 showAllTooltips does not exist

by

2👍

✅

There have been many discussions around this issue in V2 of ChartJs which you can find here, here and here.

Overall, what you need to do is register your own plugin for ChartJs which you can then use via the options property.

So if you add the following plugin registration:

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

                    // 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 you can add the showAllTooltips property in your options like so:

options: {
        showAllTooltips: true
        ...

Take a look at this illustration of your code with some sample data.

0👍

Viqas definitely gave me the right answer but I wanted to amend the following:
If anyone is having the same issue that I was having where the pluginService.register code throws all manner of errors I want to post here my register code after modification:

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 as any).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: any) {
        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;
        }
    }
})

This worked for me and I hope anyone else who runs into the same issue will find it helpful.

Leave a comment