score:13

Accepted answer

You have a lot more control over the labels if you turn on useHTML.

    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: '100px',
                'min-width': '100px'
            },
            useHTML : true
        }
    }

http://jsfiddle.net/LCYwW/5/

You'll also probably have to set a min and max for the yAxis to keep the data in proportion.

Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/

score:0

Adding the marginLeft property inside of chart worked like a charm for me.

chart: {
  type: 'bar',
  marginLeft: 200
}, ...

score:5

Also consider, using the chart: marginLeft property to set a fixed width for the labels:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            marginLeft: 160
        },
        // ...
    })
});

This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.


Related Query

More Query from same tag