Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

Shape hoverinfo or restyling

Is there a way to include hover text for shapes? If not is there a way to restyle the hover text for other traces when only hovering over a certain area of the plot?

In the example below when hovering over a point within the red shape it would be nice to either include another hover tag with info about the red shape or to somehow restyle the current hover tags (give them a thick red outline?).

Not at the moment.

We don’t provide an event for hovering over shapes, so you’ll have to use a regular DOM if you choose this strategy.

I’d recommend applying this logic before calling Plotly.newPlot. In brief, I would:

  • find all data points that are within the red shape
  • set hoverinfo.bordercolor to an array with special at the indices of the data points within the red shapes e.g.
var trace = {
  y: [/* */],
  // ...
  hoverinfo: {
    bordercolor: ['red', null, null, 'red']
  }
}

if points [0] and [3] are within the red shape.