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/taucharts@2/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
<div id="target"></div>

CSS

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

#target > svg {
  display: block;
}

JavaScript

var now = new Date();

var locale = d3.timeFormatLocale({
  "dateTime": "%A, %e %B %Y г. %X",
  "date": "%d.%m.%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
  "shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
  "months": ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
  "shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]
});

Taucharts.api.tickFormat
	.add("%B %Y", locale.format("%B %Y"));

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'x',
  y: 'y',
  guide: {
    x: {
      label: {text: 'Месяц'},
      "tickFormat": "%B %Y",
      "tickPeriod": "month"
    },
    y: {
      label: {text: 'Значение'}
    }
  },
  dimensions: {
    x: {type: 'order', scale: 'period'},
    y: {type: 'measure', scale: 'linear'}
  },
  data: _.times(5, _.identity)
    .reduce(function(memo, i) {
      var x = i * (Math.PI / 100);
      return memo.concat([{
        x: new Date(now - month(i)),
        y: Math.random(x) * 10
      }]);
    }, [])
});

chart.renderTo('#target');

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