'Chart Js - Custom tooltip position not updating while dragging

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Chart.js Drag Data Points Plugin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-dragdata.min.js"></script>
    <style>
    html,body{
      margin: 0;
      padding: 0;
    }
    canvas {
      background-color : #eee;
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    </style>
  </head>
  <body>
    <canvas id="chartJSContainer" style="height: 90%; width: 90%;"></canvas>
    <script>
    const extrenalTooltip = (context) => {
  // Tooltip Element
  let tooltipEl = document.getElementById('chartjs-tooltip');

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

  // Hide if no tooltip
  const tooltipModel = context.tooltip;
  if (tooltipModel.opacity === 0) {
    tooltipEl.style.opacity = '0';
    return;
  }

  // Set caret Position
  tooltipEl.classList.remove('above', 'below', 'no-transform');
  if (tooltipModel.yAlign) {
    tooltipEl.classList.add(tooltipModel.yAlign);
  } else {
    tooltipEl.classList.add('no-transform');
  }

  const position = context.chart.canvas.getBoundingClientRect();

  // Display, position, and set styles for font
  tooltipEl.style.opacity = '1';
  tooltipEl.style.position = 'absolute';
  tooltipEl.style.left =
    position.left + window.pageXOffset + tooltipModel.caretX + 'px';
  tooltipEl.style.top =
    position.top + window.pageYOffset + tooltipModel.caretY + 'px';
  tooltipEl.style.padding =
    tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
  tooltipEl.style.pointerEvents = 'none';
};
      var options = {
        type: 'bubble',
        data: {
          labels: ["Red"],
          datasets: [
            {
              label: 'Bubble',
              data: [{
                x: 10,
                y: 15,
                r: 30
              }],
              borderWidth: 1,
              backgroundColor: 'rgb(189, 80, 105, 1)',
              pointHitRadius: 25
            }
          ]
        },
        options: {
          scales: {
            y: {
              max: 25,
              min: 0
            },
            x: {
              max: 11,
              min: 9
            }
          },
          responsive: false,
          onHover: function(e) {
            const point = e.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
            if (point.length) e.native.target.style.cursor = 'grab'
            else e.native.target.style.cursor = 'default'
          },
          plugins: {
            dragData: {
              round: 2,
              dragX: true,
              showTooltip: true,
              onDragStart: function(e) {
                // console.log(e)
              },
              onDrag: function(e, datasetIndex, index, value) {              
                e.target.style.cursor = 'grabbing'
                // console.log(e, datasetIndex, index, value)
              },
              onDragEnd: function(e, datasetIndex, index, value) {
                e.target.style.cursor = 'default' 
                // console.log(datasetIndex, index, value)
              }
            },
            tooltip: {enabled: false, external: extrenalTooltip}
          }
        }
      }

      var ctx = document.getElementById('chartJSContainer').getContext('2d');
      window.test = new Chart(ctx, options);
    </script>
  </body>
</html>

I am working with chart js library to implement bubbled chart with chartjs-plugin-dragdata. I want to apply interactive and customized tooltip to each datapoint. But the problem is, customized tooltip is not dragging along with bubble which is being dragged. I am not sure how to make that possible. I have shared code snippet of what problem I am facing. Try to drag pink bubble and you'll see that "tooltip" text stay as it is and on drop, text jumps to dropped location.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Chart Js - Custom tooltip position not updating while dragging

Sources

Related Questions