Accessing pixel coordinates of data without event

[lnunno]

I'm trying to do something similar to the following forums where I'm trying to get the x, y coordinates of a data point in order to use the Fx.loneHover to programmatically trigger a hover event.

• https://community.plot.ly/t/how-to-customize-plotly-tooltip/332/21
• https://github.com/plotly/plotly.js/issues/1963

Any advice on how to achieve this? If I inspect the chart ref in the PlotlyComponent in does not have the function l2p or d2p anywhere within the object and I do not have an event handle to use to retrieve the x and y relative pixel locations.

[yarl]

After hew hours in the source code, here's what is working for me with Fx.hover:

in render():

<Plot
  ref={node => { this.graphNode = node; }}
  divId={`plot-${this.id}`}
  data={data}
  style={style}
  config={config}
  layout={layout}
  onHover={hover => this.onHover({ hover })}
  onUnhover={unhover => this.onHover({ unhover })}
  useResizeHandler
/>
<Plot
  ref={node => { this.graphNode2 = node; }}
  divId={`plot-${this.id}-2`}
  data={data}
  style={style}
  config={config}
  layout={layout}
  onHover={hover => this.onHover({ hover, plotIndex: 2 })}
  onUnhover={unhover => this.onHover({ unhover, plotIndex: 2 })}
  useResizeHandler
/>

and this.onHover() function:

onHover({ hover, unhover, plotIndex }) {
  const oppositeNode = plotIndex === 2 ? this.graphNode : this.graphNode2;

  if (hover && oppositeNode && oppositeNode.el) {
    Plotly.Fx.hover(oppositeNode.el, hover.event);
  } else if (unhover && oppositeNode && oppositeNode.el) {
    Plotly.Fx.unhover(oppositeNode.el, unhover.event);
  }
}

I hope it can help someone.

[sumantka]

thanks @yarl , I still don't think react-plotly has first class hover events support. Could you confirm. Thanks

[honeyspoon]

@yarl Where do you import the Plotly.Fx from?

[sureshgadupu]

install plotly js with below command npm install plotly.js-cartesian-dist-min

and import Plotly object

import Plotly from "plotly.js-cartesian-dist"; Then u can run above example