Sankey paths/links are loosing their width when the link has a big curve

Question

I am using highcharts library to plot Sankey chart with our data, which has many number of nodes in each column. My issue is links width is reduces when it is between one of nodes on the top and one of the nodes are a bit lower than that. More longer the link is more width reduces.

I am wondering if there is any work around or some simple thing from documentation that I am missing. Any help is appreciated. Below is the fiddle https://jsfiddle.net/Saibabu276/cqj2n413/

Highcharts.chart('container', {

title: {
    text: 'Highcharts Sankey Diagram'
},
chart: {
height: 1000
},
accessibility: {
    point: {
        valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
    }
},
series: [{
    keys: ['from', 'to', 'weight'],
    data: [
        ['Brazil', 'Portugal', 5],
        ['Brazil', 'France', 1],
        ['Brazil', 'Spain', 1],
        ['Brazil', 'England', 1],
        ['Canada', 'Portugal', 1],
        ['Canada', 'France', 5],
        ['Canada', 'England', 1],
        ['Mexico', 'Portugal', 1],
        ['Mexico', 'France', 1],
        ['Mexico', 'Spain', 5],
        ['Mexico', 'England', 1],
        ['USA', 'Portugal', 1],
        ['USA', 'France', 1],
        ['USA', 'Spain', 1],
        ['USA', 'England', 5],
        ['Portugal', 'Angola', 2],
        ['Portugal', 'Senegal', 1],
        ['Portugal', 'Morocco', 1],
        ['Portugal', 'South Africa', 3],
        ['France', 'Angola', 1],
        ['France', 'Senegal', 3],
        ['France', 'Mali', 3],
        ['France', 'Morocco', 3],
        ['France', 'South Africa', 1],
        ['Spain', 'Senegal', 1],
        ['Spain', 'Morocco', 3],
        ['Spain', 'South Africa', 1],
        ['England', 'Angola', 1],
        ['England', 'Senegal', 1],
        ['England', 'Morocco', 2],
        ['England', 'South Africa', 7],
        ['South Africa', 'China', 5],
        ['South Africa', 'India', 1],
        ['South Africa', 'Japan', 3],
        ['Angola', 'China', 5],
        ['Angola', 'India', 1],
        ['Angola', 'Japan', 3],
        ['Senegal', 'China', 5],
        ['Senegal', 'India', 1],
        ['Senegal', 'Japan', 3],
        ['Mali', 'China', 5],
        ['Mali', 'India', 1],
        ['Mali', 'Japan', 3],
        ['Morocco', 'China', 5],
        ['Morocco', 'India', 1],
        ['Morocco', 'Japan', 3]
    ],
    type: 'sankey',
    name: 'Sankey demo series'
}]

});

score 1 · Answer 1 · answered Jan 28 '22 at 10:04

To set the connection between nodes option series.sankey.curveFactor add a possibility to make the line straight completely or change the curve to lover.

Higher numbers makes the links in a sankey diagram or dependency wheelrender more curved. A curveFactor of 0 makes the lines straight.

  plotOptions: {
    sankey: {
      nodeWidth: 10,
      curveFactor: 0.1
    }
  },

Live demo: https://jsfiddle.net/BlackLabel/6ac2syzx/

Sankey paths/links are loosing their width when the link has a big curve

1 Answers1