X-axis value on onmousemove

plotly.js
1

Hi Team,

I need to access the x-axis date value on every mouse movement.
If I am right, there is no such event in Plotly, so I need to use the native ‘onmousemove’ event.

However, I can do some calculations based on the pixels it is not accurate enough.

Is there a more straightforward and accurate way to achieve this?

var plotContainer = document.getElementById('myDiv');

// Add an event listener to the mousemove event on the plot's container
plotContainer.addEventListener('mousemove', function(event) {
  // Get the plot's layout
  var layout = this.layout;

  // Get the x-axis range from the layout
  var xRange = layout.xaxis.range;

  // Get the x-axis scale type
  var xScaleType = layout.xaxis.type;

  // Calculate the x-axis value based on the mouse position
  var plotWidth = this.offsetWidth;
  var mouseX = event.clientX - this.getBoundingClientRect().left;

  var xValue;
  if (xScaleType === 'date') {
    // For date axis, calculate the x-value based on the date range
    var xRangeStart = xRange[0].getTime();
    var xRangeEnd = xRange[1].getTime();
    var xValueTimestamp = xRangeStart + (mouseX / plotWidth) * (xRangeEnd - xRangeStart);
    xValue = new Date(xValueTimestamp);
  } else if (xScaleType === 'category') {
    // For category axis, calculate the x-value based on the number of categories
    var categories = layout.xaxis.categoryarray;
    var numCategories = categories.length;
    var categoryIndex = Math.floor((mouseX / plotWidth) * numCategories);
    xValue = categories[categoryIndex];
  } else {
    // For numeric axis, calculate the x-value based on the range
    xValue = xRange[0] + (mouseX / plotWidth) * (xRange[1] - xRange[0]);
  }

  console.log('X-axis value:', xValue);
});
2

I think it’s ‘mousemove’ and might work on the div like this:

var myPlot = document.getElementById('myDiv');

myPlot.on('mousemove', function(event){
    var x = event.x;
    var y = event.y;
    
    var rect = myPlot.getBoundingClientRect();
    var xInPlot = x - rect.left; // x pos
    var yInPlot = y - rect.top; // y pos

    var layout = myPlot._fullLayout; // get full layout
    var xaxis = layout.xaxis;
    
    // Convert px to date using the axis' scale
    var xValue = xaxis.p2d(xInPlot);
    console.log(xValue);
});
3

Thank you allsyntax,

Unfortunately, the ‘mousemove’ does not fire at all when moving my mouse.

4

I managed to console log the value based on your code:


myPlot.on('mousemove', function(event){

    var x = event.clientX;
    var y = event.clientY;
    
    var rect = myPlot[0].getBoundingClientRect();
	console.log("rect");
	console.log(rect);
	
    var xInPlot = x - rect.left; // x pos
    var yInPlot = y - rect.top; // y pos
	
	console.log(xInPlot, yInPlot);

    var layout = myPlot[0]._fullLayout; // get full layout
	console.log(layout);
    var xaxis = layout.xaxis;
    
    // Convert px to date using the axis' scale
    var xValue = xaxis.p2d(xInPlot);
	
    console.log(xValue);
});```


The problem is the same it is very inaccurate when the range is 5 or 6 years.

![oescape|351x285](upload://kqcQy2GevnxMTM5ke1Chx7bZCQU.jpeg)
5

Maybe can you provide an example of your data, and provide an example of the inaccuracy. It’s hard to know what you mean when you say it’s very inaccurate when the range is 5 or 6 years. Have you tested if the accuracy is different across different browsers?

6

Sure, please have a look at my CodePen:

Next to the chart, I added a div displaying the reported date, please open it in the CodePen site.
Do I miss something?

7

When you zoom in, the dates are correct. When the zoom is wide (larger x-range), the dates lose accuracy. Could be pixel precision issue? I dunno… you could try plotly_hover for data points. Or maybe another user has some additional input.

1 Like