Sankey hovertemplate with customdata

plotly.js
1

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/

2

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.

3

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!

4

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.

5

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()