score:10

Accepted answer

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>

score:1

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.


Related Query

More Query from same tag