JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>

<script id="customTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" style="background: white;">
            <tr> <th colspan="2">${item.Label}</th> </tr>
            <tr> <td>Width = ${item.Width} m</td> </tr>
            <tr> <td>Height = ${item.Height} m</td> </tr>
            <tr> <td>Area = ${item.Area} m</td> </tr>
        </table>
    </script>

<div>
        <div class="chartContainer"> 
            <div> 
                <div class="chart" id="chartPolygon"></div> 
                <div class="chart" id="chartPolyline"></div> 
            </div>
        </div> 

    </div>

CSS

.chart { 
            display: inline-block; 
        }

JavaScript

$(function () {
            var roomData = createRoomData();

            $("#chartPolygon").igDataChart({
                width: "320px",
                height: "320px",
                title: "Home Floor Plan",
                subtitle: "Scatter Polygon",
                dataSource: roomData,
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true, 
                axes: [{
                    name: "xAxis",
                    type: "numericX",
                    interval: 1, 
                }, {
                    name: "yAxis",
                    type: "numericY",
                    interval: 1, 
                }],
                series: [{
                    name: "scatterPolygon",
                    type: "scatterPolygon",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    outline: "white", 
                    shapeMemberPath: "Points",
                    tooltipTemplate: "customTooltip",
                    showTooltip: true,
                    markerTemplate: {
                        render: function (renderInfo) {
                            renderInfo.context.font = "12px serif";
                            renderInfo.context.fillStyle = "white";
                            renderInfo.context.textAlign = "center";
                            renderInfo.context.fillText(
                                renderInfo.data.item().Label,
                                renderInfo.xPosition,
                                renderInfo.yPosition);
                        }
                    },
                }],
            });
            $("#chartPolyline").igDataChart({
                width: "320px",
                height: "320px",
                title: "Home Floor Plan",
                subtitle: "Scatter Polyline", 
                dataSource: roomData,
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
               ...