JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="interval-element"></div>

CSS

html,body,#interval-element{
 width:100%;
 height:100%;  
 margin:0;
 padding: 0;
}

JavaScript

var defData = [{
  type:'us', count:10, date:'01-2014'
},{
  type:'us', count:15, date:'02-2014'
},{
  type:'us', count:12, date:'03-2014'
},{
  type:'us', count:16, date:'04-2014'
},{
  type:'us', count:13, date:'05-2014'
}];
    var intervalElement = {  
        unit: {
            type: 'COORDS.RECT',
            x:'date',
            y:'count',
  guide: {
                showGridLines: 'xy',
                padding: { l:56, b:46, r:8, t:8 },
                y: {padding: 8, label: 'Count of completed entities'}
            },
            unit: [{
                type:'ELEMENT.INTERVAL'
               
            }]
        }
    };

    var s = new tauCharts.Plot(
            {
                data: defData,
                spec: intervalElement

            }).renderTo('#interval-element');