BugLabelWrapOpposite

by Rajesh Danabal

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px; width:400px;"></div>

JavaScript

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column'
  },
  xAxis: {
    opposite: true,
    categories: ['Prod AAA AAA AAA AAA', 'Prod', 'Prod AAA AAA', 'Prod AAA', 'Prod AAA', 'Prod AAA'],
    labels: {
      autoRotation: [-90],
      style: {
        color: 'red'
      }
    }
  },
  series: [{
    data: [-29.9, -71.5, -106.4, -129.2, -144.0, -176.0]
  }]
}, function(chart) {
  var maxHeight = 0,
    labelY,
    oneLineHeight,
    translateY,
    axisY = $('.highcharts-axis')[0].lastChild.pathSegList[0].y;
  Highcharts.each($('.highcharts-xaxis-labels')[0].children, function(p, i) {
    if ($(p)[0].children[0]) {
      oneLineHeight = $(p)[0].children[0].offsetHeight;
      maxHeight = $(p)[0].clientHeight;
    } else {
      maxHeight = 0;
      oneLineHeight = 0;
    }
    labelY = $(p)[0].y.baseVal[0].value;
    translateY = maxHeight - oneLineHeight - axisY + labelY;
    $(p).attr({
      transform: 'translate(0,' + (-translateY) + ')'
    })
  });
});