add optional text on Sankey links

[emmanuelle]

At the moment Sankey nodes display their labels as text, but for the links one can only have text on hover. It would be great to have an option to display text inside (or just above) the links.

Related issue: add optional text to histogram and to heatmap traces (which would remove the need for annotated heatmap figure factory).

[antoinerg]

Do you have any suggestions about how the users would specify this? Do we need a new attribute?

cc @nicolaskruchten

[emmanuelle]

maybe just a texttemplate which would be empty by default? And/or textinfo as in pie or funnel?

[kenakofer]

Yes please. It's strange that in the case of Sankey links, specifying a label is actually just specifying a hovertemplate.

[wattcommunity]

OK a Sankey is a visualisation tool, but come on, seeing the magnitude of the pipes in a png export is like, why wouldn't you make this doable! Sorry to gripe; but other Sankey tools are pants and so plotly's offer is a last gasp saloon.

[ccpesja]

I can see that there is a label attribute for link, but adding labels to it does nothing. And agreed being able to specify texttemplate would also be great.

[iyliahutta]

is this in development or will be anytime soon? would really love to have this feature and i doubt i'm the only one.

[juanyaohuang]

I create a piece of js code to permanently add link values, I tested it in R Shiny it works great:

htmlwidgets::onRender(x=p, jsCode=' function(el) { //reference code: https://stackoverflow.com/questions/67291003/add-text-to-svg-path-dynamically //reference code: https://stackoverflow.com/questions/9281199/adding-text-to-svg-document-in-javascript //reference code: https://stackoverflow.com/questions/52335837/event-when-clicking-a-name-in-the-legend-of-a-plotlys-graph-in-r-shiny //reference code: https://stackoverflow.com/questions/42280913/troubleshoot-javascript-code-in-onrender-function-of-htmlwidgets function addLabelText(bgPath, labelText) { let bbox = bgPath.getBBox(); let x = bbox.x + bbox.width / 2; let y = bbox.y + bbox.height / 2;

     let textElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
     textElem.setAttribute("x", x);
     textElem.setAttribute("y", y);
     textElem.setAttribute("text-anchor", "middle");
     textElem.setAttribute("font-size", "10px");
     textElem.setAttribute("fill", "black");
     textElem.textContent = labelText;

     bgPath.parentNode.appendChild(textElem);
     console.log(bgPath.parentNode)
   }

   let myGraph = document.getElementById(el.id);
   let nodes = document.querySelectorAll("g.sankey-node");
   let links = document.querySelectorAll(".sankey-link");
   console.log(myGraph)
   console.log(nodes[1])
   console.log(links[1])      

   for (let i = 0; i < links.length; i++) {
     addLabelText(links[i], links[i].__data__.link.value)           
   }

}')

[fstricker]

Is there any news on this issue? I find it strange that there is no way of showing persistent link texts regardless of hover states.