JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.normalize.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="target"></div>

CSS

html,body,#target{
 width:100%;
 height:100%;  
 margin:0;
 padding: 0;
}

#target > svg{  
 display:block;
}

JavaScript

var createSampleGuide = function (xName, yName) {
        return {
            autoLayout: "",
            x: {
                autoScale: true,
                cssClass: "x axis",
                hide: false,
                label: {
                    cssClass: "label inline",
                    padding: -2,
                    rotate: 0,
                    text: xName,
                    textAnchor: "end",
                    dock: 'right'
                },
                padding: 20,
                rotate: 90,
                scaleOrient: "bottom",
                textAnchor: "start"
            },
            y: {
                autoScale: true,
                cssClass: "y axis",
                hide: false,
                label: {
                    cssClass: "label inline",
                    padding: -10,
                    rotate: -90,
                    text: yName,
                    textAnchor: "end",
                    dock: 'right'
                },
                padding: 15,
                rotate: 0,
                scaleOrient: "left",
                textAnchor: "end"
            },
            padding: {
                b: 55,	// BOTTOM OFFSET
                l: 55,	// LEFT OFFSET
                r: 10,
                t: 10
            },
            showGridLines: "xy"
        };
    };

    var chart = new tauCharts.Plot({

        settings: {
            fitModel: 'none'
        },

        sources: {
            '?': {
                dims: {},
                data: []
            },

            '$': {
                dims: {
                    x: {type: 'category'},
                    y: {type: 'category'}
                },
                data: [
                    {x: 1, y: 1},
                    {x: 2, y: 1},
                    {x: 3, y: 1}
                ]
            },

            '/': {
                dims: {
                    product_name: {type: 'category'},
                    param1: {type:...