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

<div style="height: 500px">
        <div id="olapChart" class="ig-chart-root"></div>
        <div id="olapChartLegend" class="ig-chart-legend"></div>
        <div style="float: left; margin-top: 10px">
            <label for="transpose" style="vertical-align: text-bottom">チャートの転置</label>
            <input type="checkbox" id="transpose" style="vertical-align: text-bottom"></input>
        </div>
    </div>
    <div id="pivotGrid"></div>

CSS

.ig-chart-root {
            width: 79%;
            float: left;
            margin-right: 1%;
            margin-bottom: 10px;
        }

        .ig-chart-legend {
            width: 19%;
            float: left;
        }

JavaScript

$(function () {
            var $pivotGrid = $("#pivotGrid"),
                $transposeCheckBox = $("#transpose"),
                $chart = $("#olapChart"),
                hasValue = function (value) {
                    return value !== undefined && value !== null && value.count() > 0;
                },
                dataSource = new $.ig.OlapFlatDataSource({
                    dataSource: sales,
                    metadata: {
                        cube: {
                            name: "Sales",
                            caption: "セールス",
                            measuresDimension: {
                                caption: "メジャー",
                                measures: [
                                { caption: "販売単位数", name: "UnitsSold", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') },
                                { caption: "単価", name: "UnitPrice", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2) }]
                            },
                            dimensions: [
                                {
                                    caption: "日付", name: "Date", hierarchies: [
                                        $.ig.OlapUtilities.prototype.getDateHierarchy(
                                            "Date", ["year", "quarter", "month", "date"], "Dates", "日付",
                                            ["年", "四半期", "月", "日"], "すべての期間")]
                                },
                                {
                                    caption: "位置", name: "Location", hierarchies: [{
                                        caption: "位置", name: "Location", levels: [
                                        { name: "AllLocations", levelCaption: "すべての場所", memberProvider: function (item) { return "すべての場所"; } },
                                        { name: "Country", levelCaption: "国", memberProvider: function (item) { return item.Country; } },
                                  ...