X-coordinates are duplicated in plotly_click points

[Erhanjinn]

Hello plotly.js team,

when a plotly.js graph fires a plotly_click event over a timeline plot, the bbox given in click event.points contains incorrect x coordinate data. Both x coordinates are the same.

I am using the latest plotly-2.26.2.min.js.

Code snippet to reproduce the issue (see full code at https://jsfiddle.net/3Ljv1ek5/)

const data = [{...}]
const layout = {...}
const m_plot_div = document.createElement("div")
const m_plot = document.body.appendChild(m_plot_div)

Plotly.newPlot(
  m_plot,
  data,
  layout
)

m_plot.on('plotly_click', function(e) {
  console.log(e.points[0].bbox)
})

Example console output

{
  x0: 539.25,
  x1: 539.25,
  y0: 99,
  y1: 347
}

Please see the full example at https://jsfiddle.net/3Ljv1ek5/.

I would like to use the bbox data to know what is the exact click position over the timeline element.

Could someone take a look at this, please?

Thanks!

[emilykl]

Hi @Erhanjinn, as of plotly.js v4.0.0 this can be accomplished using the xPixel and yPixel keys of the click event data (added in #7966), which give the x and y pixel position of the cursor.

m_plot.on('plotly_click', function(e) {
  console.log({xPixel: e.xPixel, yPixel: e.yPixel});
})

Console output:

{
  xPixel: 244,
  yPixel: 303
}
{
  xPixel: 590,
  yPixel: 269
}
{
  xPixel: 691,
  yPixel: 277
}