Repeating X Values on a Plotly Scatter Plot

plotly.js
1

Hi all,

I have a graph that uses a contour plot and a scatter plot. The scatter plot is used to depict markers for the user on the contour plot.

My scatter plot has these X and Y values:
X: [20,100,150,200,250,300,350,20,100,150,200,250,300,350,20,100,150,200,250,300,350,20,100,150,200,250,300,350]
Y: [5,5,5,5,5,5,5.25,5.25,5.25,5.25,5.25,5.25,5.5,5.5,5.5,5.5,5.5,5.5,6,6,6,6,6,6]

So X and Y have 24 values and the indices pair up (20,5) (100,5) (150,5)… and so on

The problem that I am having is… I have an onClick handler and I am noticing that the x and y value returned are wrong based on the point I clicked.

For example: I click on the point that represents X: 20, Y: 5. However, the values I get returned back are X:20 Y:6.

I noticed that no matter what point I click, the X value is correct, but the Y value is always 6.

Could this be because there are repeating values in my X axis? If so, is there a way to fix this so that it grabs the correct X,Y value for the point I clicked?

Here is my code, this is based off of React Plotly library

const data = {
    type: 'scatter',
    mode: 'markers',
    x: xValues, //array shown above
    y: yValues, //array shown above
    hoverinfo: 'none',
    name: '',
    marker: {
	    color: 'rgb(0,0,0)',
	    size: 10
    }
}

onClick = data => {
    // do things with the data that gets returned when I click on a marker
}

The onClick handler is what I believe is bugging. It is returning the wrong point clicked, resulting in the wrong x and y values.

EDIT: here is a sandbox that showcases the error: https://codesandbox.io/s/jolly-minsky-vmd9f
To reproduce: click on on the bottom markers (example: 5, 100) and look at the console. The returned x/y value for the point clicked on is (5.25, 100)

Thanks!

2

Hi, could you please share a standalone code example that we could use to reproduce the problem? Thanks!

3

Hi @Emmanuelle, I have updated my post with the code for my scatter plot data and onClick handler. I am using the React library, so there may have to be some converting to work on vanilla JS. I hope this is enough; please let me know if there is anymore needed!