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',
    color: 'type',
    guide: {
    	color: {
      	brewer: {
        	'sin': '#ff0000',
          'cos': '#00ff00'
        }
      }
    },
    plugins: [
        Taucharts.api.plugins.get('legend')(),
        Taucharts.api.plugins.get('tooltip')()
    ]
}).renderTo('#target');


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