Sankey diagram customize tooltip

plotly.js
1

I have 2 questions regarding the sankey chart

  1. Is there anyway to disable the default tooltip for sankey charts and use custom html tooltip?
    I tried using hoverinfo: ‘none’, or hoverinfo: ‘skip’ ,and that does not disable the default tooltip.
    example: https://codepen.io/anon/pen/pKmbrY

  2. Also is there anyway to add more information to the nodes or link? Like for each node or link I would like to add information column in addition to label and color, so I can use it for tooltip.

Thanks

1 Like
2

Item 1) is a bug, thanks for the report. You can subscribe to https://github.com/plotly/plotly.js/issues/2782 for the most up-to-date development info.

Item 2) Not at the moment unfortunately.

3

By default plotly tooltips are inserted inside the <g class=“hoverlayer”></g> container

so a quick css hack can disable it completely like so:

.hoverlayer {display: none;}

for custom tooltips, depending on how custom you want you may have to utilize “plotly_hover”/“plotly_unhover” events to append the custom tooltip you have to the graph.

I am also working on this for another type of graph so I don’t have the full solution yet.

4

Are there any updates on this question? Has anyone found a solution?

I’m using the Python interface to plotly and tried to use the hovertemplate feature on each node however it is not exactly behaving as I thought it would. Does anyone know if this feature is the correct one to change each node’s popup information? If so, have you seen any examples of this? I couldn’t find anything on the net.

1 Like
5

Same issue, there seems to be no easy way of changing hover data displayed on nodes, I tried hoverinfo and hovertemplate but was not able to make them work. Documentation about this is very poor and confusing I’m afraid

6

Same issue: In an attempt to answer a Python category question I noticed that hovertemplate does not work for Sankey links:

https://plot.ly/~empet/15247

1 Like