How to align the labels of sankey diagram?

Question

In this example, when some of the values are the same (eg 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/

Answer 1

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