Chart with categories and rotated axis does not display correctly

[webmaven]

Example:

chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
        ]
    },
    axis: {
        x: {
            type: 'categorized',
            categories: ['category 1', 'category 2', 'category 3', 'this is another category', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
        },
        rotated: true
    }
});

In the following screnshot, see how the category 'ticks' are clipped on the left (not shown is how the tooltips are pushed to the right as well):

[webmaven]

I've discovered that if I set the left padding high enough the categories are revealed, but shouldn't this be calculated automatically?

[masayuki0812]

Hi, I think this should be. I'll fix.

[masayuki0812]

Hi @webmaven , I think this has been fixed in the latest version 0.1.38. Please try this version.

[matzke]

works perfectly! just great!

[radiodario]

I have found an error with the calculation where if we have two labels and the longest one is second on the chart, the padding isn't calculated correctly:

However, when the longest label is first, it works just fine:

Note that this only happens when there are 2 categories, and if we add 3 or more it works fine.

Here's the c3 code to reproduce the issue:

var chart = c3.generate({
    data: {
        json: [
            {
                thing: 'Short',
                value: 1000
            }, 
            {
                thing: 'AlongerName',
                value: 2304
            }

        ],
        keys : {
            x: 'thing',
            value:  ['value']
        },
        type: 'bar'
    },
    axis: {
        rotated: true,
        x: {
            type: 'category',
            label: 'thingy'
        },
        y: {
            label: 'something'
        }
    }
});

I've created a jsfiddle to illustrate the point

[phandel]

+1 ... only happens with 2 entries.