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.

score 11 · Accepted Answer · edited Jul 28 '17 at 00:00

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>

Sure. I changed the code above to be the whole thing. Just throw it on a web page and test it out. — Halfhoot, Jul 27 '17 at 23:54
I added your code into a runnable code snippet; your code throws a console error when running. I do not have time to debug it :) — blurfus, Jul 28 '17 at 00:01
Thanks, great answer. I had to change scale references to 'y-axis-0' to get to work. — MJ_Wales, Sep 02 '19 at 10:39

score 1 · Answer 2 · answered Oct 30 '20 at 13:59

Halfhoot's answer can be simplified a bit using the built in functions in the scales.

ctx.mousemove(function(evt) {
    let x = chart.scales['x-axis-1'].getValueForPixel(evt.offsetX);
    let y = chart.scales['y-axis-1'].getValueForPixel(evt.offsetY);
    console.log(x, y);
});

There is a description of the Scales interface on the New Scales page in the API.

chart.js 2.0 current mouse coordinates tooltip

2 Answers2

Linked