chart.js 2.0 current mouse coordinates tooltip

Question

I am implementing some point charts with chart.js. No problems there, but what I want to do is have a tooltip that is not just attached to a given data point. Right now you can create a tooltip and it will display a popup near a given data point on the chart. For instance if I have the data points [1,5], [2,6], and [3,7] it will happily show those three data points.

But what I want is when I'm between 1,5 and 2,6 to see exactly where on the x axis I am. 1.5, 1.6, etc.

Inside the tooltips options for the chart.js call I can do something like this:

tooltips: { mode: 'index', intersect: false, callbacks: { footer: function(tooltipItems, data) { return 'x:' + this._eventPosition.x + ' y:' + this._eventPosition.y; }, }, footerFontStyle: 'normal' }

But that is the position of x and y on the canvas and has nothing to do with the actual x and y graph coordinates. I can't seem to find any data available within chart.js that can get me the actual chart x,y coordinates of the current position of the mouse.

Also note I'm not needing it in the tooltip footer, I was just using that as a handy way to test output. What I would like is for an always visible tooltip in a fixed position to display the current actual chart x position that the mouse is hovering over regardless of the closest data point.

Answer 1

I finally just gathered the information and did the math. Here is just a snippet to show you how if anyone else ever has this problem.

$(document).ready(function() {
  var ctx = $("#graph_1");
  var dataArray =  [ {x:1,y:1},{x:2,y:3},{x:3,y:5},{x:4,y:8},{x:5,y:7},{x:6,y:4},{x:7,y:2},{x:8,y:1} ];
  
  var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
      datasets: [{
        label: "test",
        fill: false,
        data: dataArray
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Test Graph'
      },
      animation: {
        duration: 0,
      }, // general animation time
      hover: {
        animationDuration: 0,
      }, // duration of animations when hovering an item
      responsiveAnimationDuration: 0, // animation duration after a resize
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'x axis label'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'y axis label'
          }
        }]
      },
      tooltips: {
        mode: 'index',
        intersect: false,
        callbacks: {
          // Use the footer callback to display the sum of the items showing in the tooltip
          footer: function(tooltipItems, data) {
            //return 'x:' + this._eventPosition.x + ' y:' + this._eventPosition.y;
          },
        },
        footerFontStyle: 'normal'
      },
    }

  });

  ctx.mousemove(function(evt) {
    //console.log(evt.offsetX + "," + evt.offsetY);
    var ytop = myChart.chartArea.top;
    var ybottom = myChart.chartArea.bottom;
    var ymin = myChart.scales['y-axis-1'].min;
    var ymax = myChart.scales['y-axis-1'].max;
    var newy = '';
    var showstuff = 0;
    if (evt.offsetY <= ybottom && evt.offsetY >= ytop) {
      newy = Math.abs((evt.offsetY - ytop) / (ybottom - ytop));
      newy = (newy - 1) * -1;
      newy = newy * (Math.abs(ymax - ymin)) + ymin;
      showstuff = 1;
    }
    var xtop = myChart.chartArea.left;
    var xbottom = myChart.chartArea.right;
    var xmin = myChart.scales['x-axis-1'].min;
    var xmax = myChart.scales['x-axis-1'].max;
    var newx = '';
    if (evt.offsetX <= xbottom && evt.offsetX >= xtop && showstuff == 1) {
      newx = Math.abs((evt.offsetX - xtop) / (xbottom - xtop));
      newx = newx * (Math.abs(xmax - xmin)) + xmin;
    }
    if (newy != '' && newx != '') {
      //console.log(newx + ',' + newy);
      $("#graph_coords").html('Mouse Coordinates: ' + newx.toFixed(2) + ',' + newy.toFixed(2));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SCRIPT src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></SCRIPT>

<DIV id="graph_coords"></DIV>
<DIV class="chart-container" style="position: relative; height:40vh; width:80vw;">
  <CANVAS id="graph_1" style="background-color: #CBCBCB;"></CANVAS>
</DIV>