tick period test

HTML

<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2.5.1/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2.5.1/dist/taucharts.min.css">
<div>
  <div id="target" class="c"></div>
</div>

CSS

.c {
  border: solid 1px gray;
  width: 635px;
  height: 400px;
  margin: 0;
  padding: 0;
  float: left;
}

JavaScript

new Taucharts.Chart({
  data: data(),
  type: 'line',
  x: 'i',
  y: 'val',
  split: 'formula',
  color: 'type',
  plugins: [
    Taucharts.api.plugins.get('legend')(),
    Taucharts.api.plugins.get('tooltip')()
  ]
}).renderTo('#target');


function data() {
  return Array.from({
      length: 200
    })
    .map(function(e, i) {
      return i;
    })
    .reduce(function(memo, x) {
      var i = x / 200;
      return memo.concat([{
          type: 'sin',
          formula: 'sin(i)',
          i: i,
          val: Math.sin(i)
        },
        {
          type: 'sin',
          formula: 'sin(i) + 1',
          i: i,
          val: Math.sin(i) + 1
        },
        {
          type: 'cos',
          formula: 'cos(i)',
          i: i,
          val: Math.cos(i)
        },
        {
          type: 'cos',
          formula: 'cos(i) + 1',
          i: i,
          val: Math.cos(i) + 1
        },
      ]);
    }, []);
}