Customized Click, Hover, and Selection Styles or Traces

Plotly.js has default styles for hovering (tooltips) and for selection (dimmed traces).

In Dash, users want to be able to customize these styles. While they can customize these styles themselves through Dash callbacks, it’s slow (roundtrip to server). And while I could write this behaviour into the Dash Graph component, it would be great if this was standard behaviour that everyone could benefit from.

Here are some examples that customized interaction styles or traces could enable.

---

As requested in the Dash community forum

For this example, there was some “animation fading” implemented, this is, why the line seems to be slightly behind the mouse. But I guess it’s clear to see what kind of performance, I was hoping to get by Dash. I think, it would be really nice, if there are efforts to improve these kind of animations, because I think they are used in many data visualization tools (having a moving maker I mean). There is this built-in Plotly “Toggle Spike Lines” function in each Graph, that does nearly what I want and is pretty fast, but not customizable.

In addition to this example, users might want to:

• Make the points larger
• Make the lines that they’re hovering over thicker
• Add text to the points they’re hovering over
• Add shapes the points their hovering over (vertical or horizontal line shapes)
• Outline countries in maps

---

In this Uber Rides Dash demo created by @alishobeiri, the selected bars are replotted to be white. This persistent style informs the user which bars are selected and also matches the color palette of app itself.

While selected markers have a “dimming” effect, some users will want to customize the style of the selected points and the unselected points. For example, they might want to:

• Hide the unselected points
• Display text to the selected points (mode: "markers+text")
• Modify the colors of either selection
• Add an outline to points or countries instead of fading

---

In BI platforms, “clicking” is often used for drill downs. While we support click events, we don’t modify the look and feel of the graph after clicking. For example, users might want to display constant text when clicking on a point.

In addition, there are a few other default style changes for clickable points (this could be a separate issue):

• Modify the hover interaction of the point to make it seem more “clickable”: adding cursor: pointer and making the point a little bit larger
• Displaying an “x” over the point so that the user can “unclick” a point

---

I’m sure there are many more examples out there.

cc @alexcjohnson @etpinard @cpsievert @monfera @jackparmer

[chriddyp]

Example from @cpsievert 's work. In this case, highlighting across subplots. That type of linking hover across traces might be out of the scope of this.

https://plotcon17.cpsievert.me/workshop/day2/#18

[scottlittle]

Are there any examples of highlighting a trace upon hover in plotly for python? Or has this functionality not been added to python yet?