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.lob.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://igniteui.com/css/charts/chart-samples.css" type="text/css" rel="stylesheet"></link>

<div class="sampleContent">
        <div class="chartContainer">
            <h4>Selection with Built-In Styles</h4>
            <div id="chart"></div>
        </div>
        <div class="chartContainer">
            <h4>Selection with Custom Styles</h4>
            <div id="chartCustom"></div>
        </div>
        <div>
            <div style="float: left; padding-top: 7px; border-bottom: 1px solid #d0d0d0; width: 100%;">
				</div>
            <div style="float: left; padding-top: 20px;">
					<h4 style="float: left;">Selected Slices (grid will be empty until slice selection is performed):&nbsp;</h4>
				</div>
				<div style="float: left; padding-top: 8px;">
		         <table id="selectedSlicesGrid"></table>
				</div>
        </div>
    </div>

CSS

/* 
            Redefine the styles from infragistics.theme.css that configure the appearance of 
            selected and unselected slices.
        */

        .ui-funnel-slice-selected
        {
            opacity: 1;
        }
        .ui-funnel-slice-unselected
        {
            opacity: 0.4;
            border: 1px solid black;
        }

JavaScript

$(function () {
var data = [
            { Budget: 30, Department: "Administration" },
            { Budget: 50, Department: "Sales" },
            { Budget: 60, Department: "IT" },
            { Budget: 50, Department: "Marketing" },
            { Budget: 100, Department: "Development" },
            { Budget: 20, Department: "Support" }
        ];
        var selectedSlices = [];

        $(function () {
            //  Create a funnel chart with slice selection allowed and an event handler for 
            //  the sliceClicked event. The styles for selected and unselected slices from
            //  infragistics.theme.css file are used and redefined in the <style> node of the page.
            $("#chart").igFunnelChart({
                width: "100%",
                height: "500px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                outerLabelMemberPath: "Department",
                outerLabelVisibility: "visible",
                allowSliceSelection: true,
                useUnselectedStyle: true,
                sliceClicked: function (evt, ui) {
                    if (ui.selected) {
                        selectedSlices.push(ui.item);
                    }
                    else {
                        selectedSlices.removeItem(ui.item);
                    }
                    $("#selectedSlicesGrid").igGrid("dataBind");
                }
            });

            //  Create a funnel chart with slice selection allowed and custom styles for selected and
            //  unselected slices defined in the selectedSliceStyle & unselectedSliceStyle options.
            $("#chartCustom").igFunnelChart({
                width: "100%",
                height: "500px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
               ...