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

js library, have problem: in graph each bar represents value produced between 2 hours, tick text below bar , want between bar !

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

can me? thank in advance.

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

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

you convert x axis timeseries , have values tagged actual midpoint of 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/