Chartjs-Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working

by

1👍

Regarding question 1:
Everything disappears because you are using your chart-canvas as tooltip element and thus it gets emptied:
var tooltipEl = document.getElementById(“myChart”);

If you stick to the example provided in the documentation (https://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips), it should set you on your way.
So instead of

var tooltipEl = document.getElementById("myChart");

        // Create element on first render
        if (!tooltipEl){
        tooltipEl = document.getElementById("div");
        tooltipEl.id = 'myChart';
        tooltipEL.innerHTML = '<table></table>';
        document.body.appendChild(tooltipEl);
        }

Use

var tooltipEl = document.getElementById('chartjs-tooltip');

            // Create element on first render
            if (!tooltipEl) {
                tooltipEl = document.createElement('div');
                tooltipEl.id = 'chartjs-tooltip';
                tooltipEl.innerHTML = '<table></table>';
                document.body.appendChild(tooltipEl);
            }

Leave a comment