chart with flipped min-max values for y axis is cut off

[yuvii]

If you set up the y axis min and max values to be flipped (i.e., min is higher than max, a common need if, for example, you're showing data where less is better), the chart is calculated wrong and the graph is cut off. See demo

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 300], ]
    },
    axis: {
        y: {
            min: 700,
            max: 100
        }
    }
});

I can achieve this with some trickery (using negative values and formatting), but I'm considering that a hack

[masayuki0812]

Hi, I don't think this feature is essential and it's a little bit tricky as a chart. So, I'd like to pass at this time.

[geonux]

I need the same functionnality; but for the bar chart representation. Indeed, it is a common representation to display the rainfall with other weather parameters.

jqChart provides the "inverted" parameter as shown in this example : http://jsfiddle.net/FSEQP/

I got the same thing with NVD3 reversing the "yDomain" (cf. http://stackoverflow.com/questions/21137947/nvd3-set-scale-from-big-to-small)

Do you know a way to achieve a same functionnality with C3.JS without touching the incomming data as proposed by 'yuvii' ?

[geonux]

It's maybe possible to inject this functionnality with d3 native functions like this : http://stackoverflow.com/questions/15011256/d3-bar-chart-is-upside-down

But i dont know how to do that with C3.js

[yuvii]

@geonux for now, use my hack to achieve this

[geonux]

I have seen your hack, but I do not have access to the data API, so I can't invert the value.
Is it possible doiing such things in javascript with C3, on loading time ?

[masayuki0812]

I added axis.y.inverted and axis.y2.inverted option by this commit, so now we can invert easily by setting this option true.
I'll release this in the next version v0.4.9 shortly. Thanks.

[masayuki0812]

v0.4.9 has been released, so please let me close.

[aendra-rininsland]

Cool! Adding documentation tag.

[spongeboy]

Updated demo to use new inverted property. Note that the min and max need to be changed back so that min less than max.

http://jsfiddle.net/5uxf0bqc/