tick period test

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.css">
<div id="target"></div>

CSS

html,
body,
#target {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
}

#target>svg {
  display: block;
}

JavaScript

var now = new Date();

var chart = new Taucharts.Chart({
  type: 'line',
  x: 'x',
  y: 'y',
  guide: {
    "x": {
      "autoScale": true,
      "nice": true,
      "tickFormat": "%d-%b-%y",
      "tickPeriod": "day",
    },
    "y": {
      "autoScale": false,
      "nice": false,
      "min": 0,
      "max": 100
    }
  },
  data: _.times(35, _.identity)
    .reduce(function(memo, i) {
      var x = i * (Math.PI / 100);
      return memo.concat([{
        x: new Date(now - days(i)),
        y: Math.random(x) * 100
      }]);
    }, [])
});

chart.renderTo('#target');

function days(i) {
  return i * 1000 * 60 * 60 * 24;
};