JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn-na.infragistics.com/jquery/20121/2049/js/infragistics.loader.js"></script>
<div id='chart'></div>

JavaScript

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css",
    resources: "igPieChart"
});
$.ig.loader(function() {

    data = [{
        "Budget": 60,
        "Label": "Administration"},
    {
        "Budget": 40,
        "Label": "Sales"},
    {
        "Budget": 60,
        "Label": "IT"},
     {
        "Budget": 50,
        "Label": "HR"},
    {
        "Budget": 40,
        "Label": "Marketing"},
    {
        "Budget": 60,
        "Label": "Development"}];

    $('#chart').igPieChart({
        /* --- COLOR SCHEME
               gray, orange, soft green, pale blue
        */
        brushes: [ "#C0C0C0", "#F58855", "#99FF33", 'rgba(0, 180, 255, 0.3)' ],
        /* ----- */
        dataSource: data,
        width: '500px',
        height: '500px',
        valueMemberPath: 'Budget',
        labelMemberPath: 'Label',
        explodedSlices: '0 1 3',
        radiusFactor: 0.8,
        showTooltip: true,
        tooltipTemplate: '<div class="tooltip">${item.Label} ( ${item.Budget} )</div>'
    });
});