JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.13.1/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

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

anychart.onDocumentReady(function () {

    var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.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);
});