How can i set the tick text of x-axis between bar in a bar chart in c3.js or d3.js?

Question

js is a very good library, but I have a problem: in my graph each bar represents a value produced between two hours, but the tick text is below the bar and I want to get it between the bar !

my type of x-axis is "type: 'category'" data = ['x', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00']

Can someone help me? Thank you in advance.

I have : http://hpics.li/9fc4863

I want : http://hpics.li/1fb1090

Answer 1

You could convert your x axis to a timeseries and have the values tagged to the actual midpoint of your hour ranges (12.30, 1.30...)

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x',
            new Date('2013-01-01T00:30'),
            new Date('2013-01-01T01:30'),
            new Date('2013-01-01T02:30'),
            new Date('2013-01-01T03:30')],
            ['data1', 30, 200, 100, 400]
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%H:%M',
                values: [
                    new Date('2013-01-01T00:00'), 
                    new Date('2013-01-01T01:00'), 
                    new Date('2013-01-01T02:00'),
                    new Date('2013-01-01T03:00'),
                    new Date('2013-01-01T04:00')
                ],
                rotate: -90
            },
            height: 50
        }
    }
});

Fiddle - http://jsfiddle.net/v4z45zzj/