✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Sankey hovertemplate with customdata

Hi there,

I am trying to set up a Sankey graph where the nodes have a customised hover tooltip using the hovertemplate attribute.

I have been successful with getting the hovertemplate working, however I am struggling to understand and use the customdata attribute.

I have an object of arrays which match the array of nodes. I want to be able to add the object values to the respective nodes hovertemplates.

Here is a non working code example - https://jsfiddle.net/d7nz3je4/6/

Bumping this.

I have found a way to access the customdata array - https://jsfiddle.net/casj456d/3/

The problem with this is that it isn’t on a node basis, it looks at the entire array.

I need to be able to access customdata with the index of the node.

Hi @Glenn welcome to the forum! We have an open issue for this in the plotly.js forum: https://github.com/plotly/plotly.js/issues/4243 You can subscribe to the issue to get notifications, please stay tuned!

Thanks so much Emmanuelle!

I saw this in my troubleshooting and thought nothing of it since it was opened last year. Thanks for bumping the issue. Fingers crossed it gets worked on soon.

Good news this feature is available now in plotly 4.6 ! See the corresponding example

import plotly.graph_objects as go

fig = go.Figure(data=[go.Sankey(
    node = dict(
      pad = 15,
      thickness = 20,
      line = dict(color = "black", width = 0.5),
      label = ["A1", "A2", "B1", "B2", "C1", "C2"],
      customdata = ["Long name A1", "Long name A2", "Long name B1", "Long name B2",
                    "Long name C1", "Long name C2"],
      hovertemplate='Node %{customdata} has total value %{value}<extra></extra>',  
      color = "blue"
    ),
    link = dict(
      source = [0, 1, 0, 2, 3, 3], # indices correspond to labels, eg A1, A2, A2, B1, ...
      target = [2, 3, 3, 4, 4, 5],
      value = [8, 4, 2, 8, 4, 2],
      customdata = ["q","r","s","t","u","v"],
      hovertemplate='Link from node %{source.customdata}<br />'+
        'to node%{target.customdata}<br />has value %{value}'+
        '<br />and data %{customdata}<extra></extra>',  
  ))])

fig.update_layout(title_text="Basic Sankey Diagram", font_size=10)
fig.show()