highchart: sankey how to add text bold for node text and the percentage as per the image calculations

Question

Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown

https://codepen.io/SophTooke/pen/ExorZZj

[enter code here][2]

Answer 1

Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.

plotOptions: {
    sankey: {
        dataLabels: {
            useHTML: true,
            formatter: function() {
              let chart = this,
                  weight = chart.point.weight;
              
              return `Weight: <span>${weight}</span>`
            }
        },
    }
},

Demo:

https://codepen.io/sebastian-hajdus/pen/BarjMap

API References:

https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML