JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.onDocumentReady(function(){

    // data tree settings
    var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.AS_TABLE);

    // chart type
    chart = anychart.ganttResource();

    // chart container
    chart.container("container");

    // chart position
    chart.bounds(0, 0, "100%", "100%");

    // chart data
    chart.data(treeData);

    // data tree width
    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");

    // initiate drawing
    chart.draw();

    // area to display by default
    chart.zoomTo(1171036800000, 1176908400000);

    chart.listen(anychart.enums.EventType.ROW_CLICK, function(e) {
        var item = e['period'];
        if(item.fill == 'green') {
            item.fill = 'red';
        } else {
            item.fill = 'green';
        }
    });
});

// data
var data = [
    {
        "id": "1",
        "name": "Phase 1 - Strategic Plan",
        "periods": [
            {"id": "1_1", "start": 1171468800000, "end": 1171987200000, "fill": "green"},{"id": "6_1", "start": 1173628800000, "end": 1174320000000, "fill": "green"}]
    },
    {
        "id": "2",
        "name": "Self-Assessment",
        "periods": [
            {"id": "2_1", "start": 1173024000000, "end": 1173715200000, "fill": "red"},{"id": "4_1", "start": 1171814400000, "end": 1172419200000, "fill": "red"}, {"id": "3_1", "start": 1169740800000, "end": 1170172800000, "fill": "red"}]
    }
];