question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How do I get tooltips to always show in V2?

See original GitHub issue

I’ve managed to get this working in V1 and have found an example of it working in V2 alpha, but I can’t seem to get it working in the latest beta.

I may eventually want to always show one particular tooltip, but hoping I can figure that out later.

animation: {

                    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({
                                    _chart: self.chart,
                                    _data: self.data,
                                    _options: self.options,
                                    _active: element,
                                   _view: element._view
                                }, self);
                                tooltip.update();
                                tooltip.draw();
                            }, self);
                        }, self);
                    }
                }

Here’s an example of it working in V2 alpha: https://jsfiddle.net/c8Lk2381/

Thanks in advanced.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:21 (4 by maintainers)

github_iconTop GitHub Comments

51reactions
paulhuismancommented, Jul 8, 2016

I wonder why this isn’t a default option…

9reactions
potatopeelingscommented, May 14, 2016

@andi-b - as a temporary workaround, you can use the new pluginService to do this. Here’s a fiddle doing that http://jsfiddle.net/q15ta78q/ (yaay pluginService!)

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

and then

new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        showAllTooltips: true
        ...
Read more comments on GitHub >

github_iconTop Results From Across the Web

Chart.js v2: How to make tooltips always appear on pie chart?
Although I initially asked how to permanently show tooltips on pie chart here, I found a better solution: showing values as labels in ......
Read more >
How to Always Show Tooltip on Pie Chart in Chart js - YouTube
How to Always Show Tooltip on Pie Chart in Chart jsIn this video we will cover how to always show tooltip on pie...
Read more >
Tooltips - Bootstrap
Reveals an element's tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is ......
Read more >
Javascript Chart.js - Doughnut show tooltips always
... java 2 s. c om // Show tooltips always even the stats are zero Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.
Read more >
Tooltip | Components - BootstrapVue
You can manually control the visibility of a tooltip via the syncable Boolean show prop. Setting it to true will show the tooltip,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found