Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data

Question

I have created a donut chart. I want to display the tooltip always in the donut chart along with the legends.

I have followed this stack overflow question.

Question which explain the tooltip to be shown always

I have followed the answer and created a doughnut chart and tried to show the tooltip always.

it works fine, however it is not showing all the label, esp. when you have multiple data with 0 value.It just overwrite the label.

my label and values are "Red" -0, "Green" -0 & "Yellow"-100

here is shows tooltip for "Yellow-100" and "Green-0", i think it is overwriting on top of "Red-0". How to show tooltip for "Red-0" and "Green-0" both together.

html:

<canvas id="canvas"></canvas>

Javascript:

var ctx = document.getElementById("canvas").getContext("2d");

        var data = {
            labels: [
                "Red",
                "Green",
                "Yellow"
            ],
            datasets: [
                {
                    data: [0, 0, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };

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

        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: {
                showAllTooltips: true
            }
        });

here is the link for jsfiddle.

doughnut chart 0 data tooltip is not shown for all

Chart Version : 2.1.0

please help.

Answer 1

you could use the tooltip callbacks in order to check which data is inside and place it on a different position.

For example you could return the red label in the title and the green one in the footer:

            callbacks: {
               title: function(tooltipItems, data) {
                  return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
                },
                label: function(tooltipItem, data) {
                    //remove body, show data only in title
                },
                footer: function(tooltipItems, data) {
                     return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
                }
            }