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);
});
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);
});
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.

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?
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.