JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-gantt.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css" />
    
<div id="container" class="default"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .default
        {
        }
        .custom
        {
            cursor:help;
        }

JavaScript

anychart.onDocumentReady(function () {

    var treeData = anychart.data.tree(data, 'as-table');

    chart = anychart.ganttResource();
    chart.container("container");
    chart.bounds(0, 0, "100%", "100%");
    chart.data(treeData);
    chart.splitterPosition(170);

    var dataGrid = chart.dataGrid();

    // settings for first column
    dataGrid.column(0).width(30).title().text("#");
    // settings for the second column
    dataGrid.column(1).width(140).format(function (item) {
        return item.get("name");
    }).title().text("Person");

    chart.draw();
    chart.zoomTo(1171036800000, 1176908400000);

    //for custom cursor set custom CSS style for chart container and
    //switch default and custom CSS styles in listeners

    //set custom cursor for hovering datagrid cells
    chart.listen('rowMouseOver', function (event) {
    console.log('lol');
        if (event.originalEvent.clientX < (dataGrid.column(1).width() + dataGrid.column(0).width())) {
            document.getElementById('container').className = 'custom';
        }
    });

    //set default cursos for mouse out datagrid cells
    chart.listen('rowMouseOut', function (event) {
        console.log('lol1');

        if (event.originalEvent.clientX < (dataGrid.column(1).width() + dataGrid.column(0).width())) {
            document.getElementById('container').className = 'default';
        }
    });
});

// set label object to configure labels in periods
var data = [
    {
        "id": "1",
        "name": "Period 1",
        "periods": [
            {
                "id": "1_1",
                "start": 1171468800000,
                "end": 1171987200000
            }]
    },
    {
        "id": "2",
        "name": "Period 2",
        "periods": [
            {
                "id": "1_2",
                "start": 1171668800000,
                "end": 1171887200000
            }]
    }
];