Highcharts : How to fix labels to the top when xAxis rotation is 90°?

Question

Here is the test :

$(function() {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Long xAxis legends',
        },
        xAxis: {
            categories: ['a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short', 'a long category name', 'another long category name', 'a very long category name', 'Thats enormous', 'short'],
            labels:{
               rotation:90,
               y:100,
            },
        },
        series: [
            {
            name: 'Some values',
            data: [10, 20, 53, 2.51, 1.35, 10, 20, 53, 2.51, 1.35],
            },
            {
            name: 'Other values',
            data: [22.40, 0.15, 40, 10.73, 13, 22, 15, 40.11, 10, 13],
            }
        ],
        legend: {
            layout: 'vertical',
            align: 'top',
            verticalAlign: 'top',
            x: 50,
            y: 65,
            borderWidth: 0,
            margin: 30
        },
    });
});

}); http://jsfiddle.net/Y5Qhm/1/

I would like to have a chart with vertical xAxis labels with a top alignment.

In my real case, i would have many more data, so i can't do otherwise than a rotation.

I have tried the xAxis parameters : http://api.highcharts.com/highcharts#xAxis.labels

I thought the align would do the trick but when i add it to the rotation parameter, the chart is broken.

Thanks in advance.

Answer 1

Use:

align: 'top'

like this:

labels:{
   rotation:90,
   align: 'top'
   //y:100,
},

jsFiddle: http://jsfiddle.net/Y5Qhm/2/