Search code examples
javascriptangularjsc3

How to fit Y axis in c3


I want to use rotated axis and I want to fit Y axis. How can I do this?

I tried :

 c3.generate({
    data: {
    x: 'x',
    columns: [
        ['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'],
        ['sample', 30, 100, 400, 150],
    ]
},
 axis : {
    rotated: true,
    x : {
        type : 'timeseries',
        tick: {
            fit: true,
            format: "%e %b %y"
        }
    },
    y: {
        tick: {
            fit: true
        }
    }
}

but nothing changes. Any help? I use 0.4.10 version of c3.


Solution

  • Didn't quite get what you wanted to do, but the

    rotated: true 
    

    seems to be doing what it is supposed to do i.e. swap the x and y axis. (fiddle - http://jsfiddle.net/g93c77Lu/)

    fit is not a valid option for the y axis, so it doesn't actually do anything.

    The x axis fit (http://c3js.org/reference.html#axis-x-tick-fit) does what it is supposed to too (the ticks are according to the data point) - just change the true to false in the fiddle to get an idea of what it will look like without the fit.

    Note - y type is also not available yet (http://c3js.org/reference.html#axis-y-type) in case you were thinking about swapping the data arrays.