how to format time on xAxis use d3.js

April 1, 2023 by Tarik

You can use the tickFormat function on the axis object as below

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%H"));

The %H specifies hour (24-hour clock) as a decimal number [00,23]. Check this link D3 time formatting for more information

You can check out a working example in this tributary 24hr time example