Feature request: Hover link color in Sankey graphs

📊 Plotly Python
1

In Sankey diagrams (which are awesome BTW), it is not currently possible to define the color used to highlight links when hovering. It currently changes the opacity of the links, but in complex diagrams, it can be difficult to spot when multiple links (with the same label) are highlighted and differentiate them from other narrow links that overlap others (and are therefore permanently darker as it is)

Request: make the hover link color/opacity configurable

See for example:

Current output:

Screenshot 2021-05-12 at 12.00.58
Screenshot 2021-05-12 at 12.00.581609×979 203 KB

Desired output:

Screenshot 2021-05-12 at 12.00.58 copy
Screenshot 2021-05-12 at 12.00.58 copy1609×979 207 KB

1 Like
2

Hi,

I agree this should be a Plotly setting when creating a Sankey diagram.

However, using custom CSS in your styles.css does the work, such as :

.sankey-link:hover {
  fill: gold !important;
  fill-opacity: 1 !important;
}

That way, you can set fill color, fill opacity, and basically any style attribute to track your links trough all the flows.

Current limitations :

  • link styling on hover only happens when hovering on a link, but not hovering a node (that should style all links outbound of the node)
  • you cannot really track a item trough all the flow as custom style on hovering is only for the link between two nodes, but not for all the links for that item

Having a separate attribute in the Sankey trace such as hovercolor, which would be filled like the color attribute for the link attribute is still the best solution …

3

How do you go about adding a custom CSS if you are on Databricks?

4

Link hovercolor just got accepted as a new attribute in PlotlyJS. Feature: Sankey Link Hover Styling (via link hovercolor attribute) by TortoiseHam · Pull Request #6864 · plotly/plotly.js · GitHub

Hopefully it’ll show up soon in the python wrapper also.

1 Like