How to align the labels of sankey diagram?

Question

In this example, when some of the values are the same (e.g. 0), the labels are getting overlapped. Can someone help me align these labels vertically? I want them to be moved to the top of the node/bar.

Highcharts.chart('container', {

    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Oil', 'Transportation', 94],
            ['Natural Gas', 'Transportation', 3],
            ['Coal', 'Transportation', 0],
            ['Renewable', 'Transportation', 0],
            ['Nuclear', 'Transportation', 3],

            ['Oil', 'Industrial', 0],
            ['Natural Gas', 'Industrial', 0],
            ['Coal', 'Industrial',0],
            ['Renewable', 'Industrial', 0],
            ['Nuclear', 'Industrial',0],

            ['Oil', 'Residential & Commercial', 0],
            ['Natural Gas', 'Residential & Commercial', 0],
            ['Coal', 'Residential & Commercial',0],
            ['Renewable', 'Residential & Commercial', 0],
            ['Nuclear', 'Residential & Commercial', 0],

            ['Oil', 'Electric Power', 0],
            ['Natural Gas', 'Electric Power', 0],
            ['Coal', 'Electric Power', 0],
            ['Renewable', 'Electric Power', 0],
            ['Nuclear', 'Electric Power', 0]
        ],
        type: 'sankey',
        name: 'Energy in the United States'
    }]

});

http://jsfiddle.net/Lmn6gjby/3/

Is it enough for you to set dataLabels.padding to -5? http://jsfiddle.net/BlackLabel/x7ufycos/ — raf18seb, Sep 24 '18 at 11:35
@raf18seb the padding option is moving the labels horizontally, I want a considerable amount of gap between the labels vertically. — Murali Krishna, Sep 24 '18 at 12:05
What about to position every label manually in CSS? http://jsfiddle.net/BlackLabel/nts1c2uo/ — raf18seb, Sep 24 '18 at 13:47

score 1 · Accepted Answer · answered Sep 25 '18 at 10:28

You can return every label as HTML element:

plotOptions: {
  sankey: {
    dataLabels: {
      useHTML: true,
      nodeFormatter: function() {
        return "<span class='labelPosition label-" + this.colorIndex + "'>" + this.key + "</span>"
      }
    }
  }
},

set position: relative; and position every label manually in CSS:

.labelPosition {
  color: black;
  position: relative;
}

.label-0 {
  top: 0px;
}

.label-5 {
  top: 6px;
}

.label-6 {
  top: -1px;
}

.label-7 {
  top: 2px;
}

.label-8 {
  top: 12px;
}

Online demo: jsFiddle

How to align the labels of sankey diagram?

1 Answers1