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