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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.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://igniteui.com/css/charts/chart-samples.css" type="text/css" rel="stylesheet"></link>

<table>
        <tr>
            <td style="width: 450px; min-width: 210px;">
                
                <div id="funnel" style="border: none;"></div>
            </td>
        </tr>
    </table>

JavaScript

$(function () {
var xmlDoc =
            '<CompanyBudget>' +
                '<BudgetEntry Department="Development" Budget="100" />' +
                '<BudgetEntry Department="IT" Budget="60" />' +
                '<BudgetEntry Department="Sales" Budget="60" />' +
                '<BudgetEntry Department="Marketing" Budget="50" />' +
                '<BudgetEntry Department="Administration" Budget="30" />' +
                '<BudgetEntry Department="Support" Budget="20" />' +
            '</CompanyBudget>';

        $(function () {
            //Binding to XML requires a schema to define data fields
            var xmlSchema = new $.ig.DataSchema("xml",
                {
                    //searchField serves as the base node(s) for the XPaths
                    searchField: "//BudgetEntry",
                    fields: [
                        { name: "Department", xpath: "./@Department" },
                        { name: "Budget", xpath: "./@Budget", type: "number" }
                    ]
                }
            );

            //This creates an Infragistics datasource from the XML 
            //and the Schema which can be consumed by the grid.
            var ds = new $.ig.DataSource({
                type: "xml",
                dataSource: xmlDoc,
                schema: xmlSchema
            });

            //  Create a basic funnel chart
            $("#funnel").igFunnelChart({
                width: "100%",
                height: "450px",
                dataSource: ds,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible"
            });
        });
});