JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<table>
        <tr>
            <td id="polylineChart"></td>
            <td id="polylineLegend" style="float: left"></td>
        </tr>
    </table>

JavaScript

$(function () {
(function () {
            var data = buildGraph();

            $("#polylineChart").igDataChart({
                width: "98%",
                height: "550px",
                title: "組織図",
                subtitle: "部門の構造の表示",
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
                axes: [{
                    name: "xAxis",
                    type: "numericX",
                    labelVisibility: "collapsed",
                    minimumValue: -15,
                    maximumValue: 7,
                }, {
                    name: "yAxis",
                    type: "numericY",
                    labelVisibility: "collapsed"
                }],
                series: [{
                    name: "polylineSeries",
                    type: "scatterPolyline",
                    dataSource: data.Graph,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    title: "polyline series",
                    shapeMemberPath: "Points",
                }, {
                    name: "departmentNodes",
                    type: "bubble",
                    title: "部門",
                    dataSource: data.Departments,
                    xMemberPath: "X",
                    yMemberPath: "Y",
                    radiusMemberPath: "Size",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    markerType: "circle",
                    radiusScale: {
                        minimumValue: 70,
                    },
                    legend: { element: "polylineLegend" },
                }, {
                    name: "employeeNodes",
                    type: "bubble",
                    title: "社員",
                    dataSource: data.Employees,
                    xMemberPath: "X",
                    yMemberPath: "Y",
                    radiusMemberPath: "Size",
                    xAxis: "xAxis",
                    yAxis:...