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: 300px;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.onDocumentReady(function(){

    var data = [
        {
            "id": "1",
            "name": "French Revolution",
            "periods": [
                {"id": "1", "start": Date.UTC(1789), "end": Date.UTC(1799), "fill": "green"}]
        },
        {
            "id": "2",
            "name": "American Civil War",
            "periods": [
                {"id": "2", "start": Date.UTC(1861), "end": Date.UTC(1865), "fill": "green"}]
        },
        {
            "id": "3",
            "name": "World War I",
            "periods": [
                {"id": "3", "start": Date.UTC(1914), "end": Date.UTC(1918), "fill": "green"}]
        },
        {
            "id": "4",
            "name": "Era of Renaissance",
            "periods": [
                {"id": "4", "start": Date.UTC(1400), "end": Date.UTC(1800), "fill": "#7fa2ff"}]
        },
        {
            "id": "5",
            "name": "Burgundian Wars",
            "periods": [
                {"id": "5", "start": Date.UTC(1474), "end": Date.UTC(1477), "fill": "green"}]
        }
    ];

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

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

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

    // set chart data
    chart.data(treeData);

    var timeline = chart.getTimeline();
    var header = timeline.header();
    header.midLevel(false);
    header.lowLevel(false);
    header.topLevel().labels().rotation(90);
    
    var dataGrid = chart.dataGrid();
    // settings for the first column which is invisible
    dataGrid.column(0).width('10%');
    dataGrid.column(1).width('90%');
    chart.splitterPosition(220);

    // initiate drawing
    chart.draw();

    chart.zoomOut(2);
});