nvd3 and angular - Unable to fix axis values

I'm trying to develop a multi-chart using angular-nvd3.

The chart works fine, I can get data and display the values I need. The problem I've got now, is that I'd like to display on the x-axis some specific values, but I can't for some reason.

here's what I've got so far: http://codepen.io/NickHG/pen/rLWNea?editors=1010

The chart options are the following:

chart: {
   type: 'multiChart',
   height: 450,
   margin: {
      top: 10,
      right: 40,
      bottom: 60,
      left: 30
      },
   useInteractiveGuideline: false,
   transitionDuration: 10,
   style: 'expand',
   tooltip: {
       keyFormatter: function(d, i) {
       return "Test";
       }
     },
   zoom: {
      enabled: true
     },
   xScale: x_scale,
   xAxis: {
     ticks: 14,
     domain: [0, 14],
     axisLabel: '',
     tickFormat: function(d) {
        return d3.time.format('%H:%M')(new Date(d * 1000));
      }
     },
    Axis1: {
        axisLabel: '',
        axisLabelDistance: -100
     }
 }

What i'm trying to achieve, is an X axis with each hour from 00:00 to 23:00 (I've also tried this but with no luck: how to use d3.time.scale to create label for each hour of day and each day of week )

The idea for the x axis is that I should be able to display hours, days or weeks, but I guess that once I properly understand how to display hours, I should probably be able to figure out myself how to print values in a different format.

Thanks for any help

Solution

You were almost all the way there. All you need to amend in your pen is the number of ticks on the x-axis from 6 to 24....

nv.addGraph(function() {         
      chart = nv.models.multiChart()    
      chart.margin({"left":5,"right":5,"top":10,"bottom":20})
      chart.showLegend = true
      chart.xAxis
           .scale(xAxisScale())
           .ticks(24)   //--> changed from .ticks(6)
           .tickFormat(d3.time.format("%H:%M"));

See Updated pen. Cheers!