heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Sankey chart chip labels

Hi team, I have rendered Sankey chart this way:
SankeyWithoutChip.png
SankeyWithoutChip.png (166.04 KiB) Viewed 389 times
. But I need a Sankey chart with labels inside a chip label like this:
SankeyWithChip.png
SankeyWithChip.png (103.43 KiB) Viewed 389 times
. Please let me know how to achieve this. Thank you.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sankey chart chip labels

Hello heerak2492!
We appreciate you reaching out to us!

You can add some styling to dataLabels by setting dataLabels.useHTML to true and wrapping them with div with proper CSS styles. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/hu1m73dw/
API Reference: https://api.highcharts.com/highcharts/s ... eFormatter
https://api.highcharts.com/highcharts/s ... ls.useHTML

Feel free to ask any further questions
Kind regards!
Hubert Kozik
Highcharts Developer
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Sankey chart chip labels

Hi Hubert, Thank you so much for the styling. That was really helpful. Need one more information regarding the labels. Right now, I have been rendering the labels without any weight attached to the label. Like this:
without.png
without.png (20.33 KiB) Viewed 375 times
. Is there a possibility to render the chart with the weights or any values to be attached to the respective label strings like this:
with.png
with.png (37.64 KiB) Viewed 375 times
. Thanks in advance.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sankey chart chip labels

heerak2492,
You can show any value from this object in nodeFormatter callback function. For example, you can pass a sum of points of each label. You can check it in the demo below.

Demo: https://jsfiddle.net/BlackLabel/7obmwhtu/

Do not hesitate to contact us in the future.
Kind regards!
Hubert Kozik
Highcharts Developer
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Sankey chart chip labels

Hey Hubert, Thanks for a quick reply. I need to get the weight along with the key. But like we are showing for key by this.key, is it not possible to show weight by this.weight or ayything like that?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sankey chart chip labels

heerak2492,

the weight property is attached to each point and it is related also to each path between two points. From the 'Brazil' node, there are 4 paths (one with a different weight, three with the same weight), so there cannot be just one number of weight in the data label. That's why I suggested using this.sum, which is a sum of weight from each node. In console.log from 12 line you can see what properties you can show in the data label.

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”