[Chartjs]-Create an interactive custom tooltip for chartjs

by

1👍

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

    if (!tooltipEl) {
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.innerHTML = `<table></table>`;
      document.body.appendChild(tooltipEl);

      tooltipEl.addEventListener('mouseleave', () => {
        tooltipEl.style.opacity = 0;
      });
      tooltipEl.addEventListener('mouseenter', () => {
        tooltipEl.style.opacity = 1;
      });

You can also control tooltip visibility in afterEvent hook.

    plugins: [
      {
        id: 'turnOffTooltipPlugin',
        afterEvent(chart, args, pluginOptions) {
          const { event } = args;

          if (event.native.type === 'mouseout') {
            let tooltipEl = document.getElementById('chartjs-tooltip');

           if (tooltipEl) {
             tooltipEl.style.opacity = 0;
           }
        }
      }
     ]

Leave a comment