Labels cut off in chart

I have a bar chart with rotated axes. The labels are a little long and are getting cut off. Here is a live demo:

https://dl.dropboxusercontent.com/spa/juxddtvfvlf51yv/Sample/test.html

Here is the code:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 50, 50, 50, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.25 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    },
    axis: {
        x: {
            type: 'categorized',
            categories: ['City: Police and Fire', 'City: General Fund', 'City: Public Library', 'Board of Liquidation', 'Sewerage and Water Board', 'Audubon Zoo', 'Audubon Aquarium', 'Board of Assessors', 'School Board', 'Levee Board', 'Law Enforcement', 'Economic Development','Parkway and Recreation Department', 'Capital Improvement', 'Street and Traffic Control', 'Police and Fire']
        },
        rotated: true
    }
});

[gopeter]

I had the same problem:

Simply add

padding: {
  left: 500
},

to your chart config. To set a dynamic value, I’m using a little jQuery Plugin that gets the length of a text-string:

$.fn.textWidth = function(text, font) {
  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  return $.fn.textWidth.fakeEl.width();
};

var longest_text_width = 0;
chartData[0].forEach(function(data) {
  var w = $.fn.textWidth(data, '13px Clear Sans');
    if (w > longest_text_width) {
      longest_text_width = w;
    }
});

var chart = c3.generate({

  ...

  padding: {
    left: longest_text_width + 10 // add 10px for some spacing
  },

  ...

});

[mervinva]

Any update in this issue ? I am still getting this.