Custom Labels and position with Nivo Sankey

[Bilal1122]

I am trying to achieve a custom label where maybe I can pass a label and a subtext underneath. Also, some sort of width or line break if the text is too long
Is this currently possible with Nivo Sankey?

Also the capability of custom positioning. Seems like labelPosition & labelOrientation only take a string and not a function. If it can be made dynamic like colors that would be great.

[plouc]

Being based on SVG, there's no builtin support for line breaks/text width, your best option would be to use a custom layer, you could even use a foreign object and a div, which can make dealing with text a bit easier, but it requires a bit of work to implement custom nodes.

The dimensions of the nodes are quite important for the rest of the layout, so doing this would be very difficult to accept some arbitrary functions.

[rohitushur]

Is there any documentation available for using custom layers ? @plouc

[plouc]

Not really, you have to inspect the typings, but basically your custom component would receive the following properties:

links,
nodes,
margin,
width,
height,
outerWidth,
outerHeight,

For custom labels, you could use the nodes to position and get the necessary data.

[plouc]

I found an old codesandbox with a custom layer: https://codesandbox.io/p/sandbox/sankey-custom-b4iyi?file=%2Fsrc%2FApp.js, maybe it can help.