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

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:


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

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


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

$(function () {
        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