nvd3 with date axis

by Sourabh Tewari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
<div id="chart">
  <svg style='height:300px'></svg>
</div>

CSS

/********************
 * HTML CSS
 */

.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/********************
 * TOOLTIP CSS
 */

.nvtooltip {
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  padding: 1px;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 10000;
  font-family: Arial;
  font-size: 13px;
  transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;
  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
  padding: 8px;
}

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  line-height: 18px;
  font-weight: normal;
  background-color: #f7f7f7;
  text-align: center;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
}

/********************
 * SVG CSS
 */

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;
  width: 100%;
  height: 100%;
}

svg text {
  font: normal 12px Arial;
}

svg .title {
  font: bold 14px Arial;
}

.nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
...

JavaScript

var stuff = [{
    "year": 2015,
    "month": 12,
    "s1": 0.38
  },
  {
    "year": 2016,
    "month": 1,
    "s1": 0.39
  },
  {
    "year": 2016,
    "month": 2,
    "s1": 0.43
  },
  {
    "year": 2016,
    "month": 3,
    "s1": 0.40
  },
  {
    "year": 2016,
    "month": 4,
    "s1": 0.39
  },
  {
    "year": 2016,
    "month": 5,
    "s1": 0.39
  },
  {
    "year": 2016,
    "month": 6,
    "s1": 0.38
  },
  {
    "year": 2016,
    "month": 7,
    "s1": 0.37
  },
  {
    "year": 2016,
    "month": 8,
    "s1": 0.37
  },
  {
    "year": 2016,
    "month": 9,
    "s1": 0.35
  },
  {
    "year": 2016,
    "month": 10,
    "s1": 0.37
  },
  {
    "year": 2016,
    "month": 11,
    "s1": 0.36
  },
  {
    "year": 2016,
    "month": 12,
    "s1": 0.37
  },
  {
    "year": 2017,
    "month": 1,
    "s1": 0.35
  },
  {
    "year": 2017,
    "month": 2,
    "s1": 0.36
  },
  {
    "year": 2017,
    "month": 3,
    "s1": 0.37
  },
  {
    "year": 2017,
    "month": 4,
    "s1": 0.38
  },
  {
    "year": 2017,
    "month": 5,
    "s1": 0.35
  },
  {
    "year": 2017,
    "month": 0.36,
    "s1": 0.36
  },
  {
    "year": 2017,
    "month": 7,
    "s1": 0.36
  },
  {
    "year": 2017,
    "month": 8,
    "s1": 0.35
  },
  {
    "year": 2017,
    "month": 9,
    "s1": 0.36
  },
  {
    "year": 2017,
    "month": 10,
    "s1": 0.37
  },



];

var vals = [];
for (var i = 0; i < stuff.length; ++i) {
  var date = new Date(Date.UTC(stuff[i]["year"], stuff[i]["month"] - 1, 1,0,0,0,0));
  vals.push({
    x: date,
    y: stuff[i]["s1"]
  });

}

nv.addGraph(function() {
  var data = [{
    "values": vals,
    "key": "s1",
    "color": "#000000"
  }];
  var chart = nv.models.lineChart()
    .forceY([0, 0.5]);

	/*
  	Firstly, change the scale to time scale for x axis.
    I guess nvd3 considers this as linear scale and hence picks the number of ticks based on linear scale logic (Although I'm not sure about this).
  */
	chart.xScale(d3.time.scale());
  
  /*
  	-...