Posted in Uncategorized

How do I get tooltips to always show in V2?

   February 24, 2021  5 Comments on How do I get tooltips to always show in V2?

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.

Author: Fantashit

5 thoughts on “How do I get tooltips to always show in V2?”

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

  3. What if I want to display tooltips based on an outside event other than hovering over the chart? I’d love to be able to pass an x,y into something and have it show the tooltip.

  4. @fernandocode: I had to do this:

    options: { showAllTooltips: true, }

    Then add this code:

    Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { 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; } 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; } } });

  5. Did ChartJS ever implement this as a default option? seems like very common use case. Anyone that has got this working using angular2-chartjs? Im trying to figure this out.

Comments are closed.