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

CSS

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

JavaScript

var data = [
        {x:1, y:1, name:'firstLine'},
        {x:5, y:19, name: 'secondLine'},
        {x:14, y:3, name:'firstLine'},
        {x:6, y:1, name: 'secondLine'},
    ];
    var lineElement = {  
        unit: {
            type: 'COORDS.RECT',
            x:'x',
            y:'y',
  guide: {
                showGridLines: 'xy',
                padding: { l:56, b:46, r:8, t:8 },
                x: {padding: 8, label: 'x'},
                y: {padding: 8, label: 'Y'}
            },
            unit: [{
                type:'ELEMENT.LINE',
                x:'x',
                y:'y',
                color:'name'
            }]
        }
    };

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

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