C3.js, y-axis time

Question

Using C3.js, I am trying to generate a graph whose x-axis is a linear list of kilometres, and y-axis is the corresponding time - in format MM:SS.

The best I have been able to generate is the result of the below, which is the reverse of what I'm looking for. This produces a graph with times on the x-axis and kilometres on the y-axis. Could anyone advise how I could convert the below to a generate a graph with the x-axis KMs, and y-axis times. Thank you.

var km_chart = c3.generate({
    "data": {
        "x": "time",
        "y": "kms",
        "columns": [
            ["time", "04:00", "04:00", "04:15", "04:30", "04:15"],
            ["kms", 1, 2, 3, 4, 5]
        ]
    },
    "axis": {
        "x": {
            "type": "category"
        }
    },
    "bindto": "#km_chart"
});

Answer 1

The simpliest solution would be to rotate your graph with:

"axis":{
 <your stuff>
 rotate: true
}

The y-axis is only accepting values, so you can switch your x/y-axis with rotate or you have to convert your time into some value. You could use 1234 as 12:34 for example.