JSFiddle - React, Tailwind, and code Playground

HTML

<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="line"></div>

CSS

body,#line {
    height:100%
}
.color-us {
  stroke:blue
}
.color-bug {
  stroke:red
}

JavaScript

var defData = [{
  type:'us', count:0, date:'12-2013'
},{
  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'
},{
  type:'bug', count:21, date:'01-2014'
},{
  type:'bug', count:19, date:'02-2014'
},{
  type:'bug', count:23, date:'03-2014'
},{
  type:'bug', count:26, date:'04-2014'
},{
  type:'bug', count:23, date:'05-2014'
}];
var chart = new Taucharts.Chart({
            guide:{
              padding:{l:70, t:10, b:70,r:10},
              showGridLines:'xy',
              color:{
                brewer:{
                  us:'color-us',
                  bug:'color-bug'
                }
              },
              y:{
                label:{
                  text:'Count of completed entities',
                  padding:50
                }
              },
              x:{
                label:'Month'
              }
            },
            data: defData,
            type: 'line',           
            x: 'date',
            y: 'count',
            color: 'type'
        });

  chart.renderTo('#line');