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