How to compute x,y values from a click event using x,y pixel coordinates in ChartJS?

Question

I would like to receive the x,y values from a line chart in ChartJS, when the user clicks on the Chart. Die difficulty compared to usually discusses techniques is, that I need to receive x,y values from any position in the chart and not just when I click on some samples in the dataset.

So when I click on some empty place, I need to know its x and y axis values.

Got some example with a comment therein, where I sutck:

var randomInt = function() {
  return (Math.random() * 100) - 50;
};

//needs it for the test
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];

var datas = [{
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }];

var scatterChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    data: datas
  }]
};



var ctx = document.getElementById("canvas").getContext("2d");
var myScatter = new Chart.Scatter(ctx, {
  data: scatterChartData,
  options: {
    title: {
      display: true,
      text: 'Chart.js Scatter Chart'
    },
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
       

        },
        scaleLabel: {
          display: true,
          labelString: 'x axis'
        }
      }],
      yAxes: [{
        position: 'right',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        }
      }]
    }
  }
});

//
		canvas.onclick = function(evt){
    //HERE I have the x,y pixel coordinates inside the evt object.
    //How to get the x,y values from the x and y axis??
    //this works only if I click on one of the samples...
			var activePoints = myScatter.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
      if(firstPoint !== undefined){
      	var label = myScatter.data.labels[firstPoint._index];
				var value = myScatter.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
        
        alert(label + ": " + value.x);
        alert(label + ": " + value.y);
      }
		};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script>
<div>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

Answer 1

I found at least a way to extract the y-axis value. The computation of the x-axis value should be similar:

//inside the click callback...
var scaler=that.chart.scales['y-axis-0'];
var chart_height_px=scaler.bottom+scaler.top;

var y=evt.clientY-that.canvas[0].getBoundingClientRect().top-scaler.top;

var yval=scaler.max-y/scaler.height*(scaler.max-scaler.min);
console.log("value clicked: %o, ypx: %o", yval, y);
that.trigger("onTickerYClick", yval);