JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/gantt-charts/human-resource-chart/data.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<input type="button" id="forward" value="Forward" />
<input type="button" id="backward" value="Backward" />
<div id="container"></div>

CSS

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

JavaScript

//start visible range
var start = 1171036800000;
var end = 1176908400000;

anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples-data/gantt-charts/human-resource-chart/data.js
    // create data tree
    var treeData = anychart.data.tree(getData(), 'asTable');

    // create resource gantt chart
    chart = anychart.ganttResource();

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

    //set DataGrid and TimeLine visual settings
    chart.dataGrid()
        .rowOddFill('#fff')
        .rowEvenFill('#fff');
    chart.getTimeline()
        .rowOddFill('#fff')
        .rowEvenFill('#fff');

    chart.rowSelectedFill('#D4DFE8')
        .rowHoverFill('#EAEFF3')
        // set start splitter position settings
        .splitterPosition(150);


    // get chart data grid link to set column settings
    var dataGrid = chart.dataGrid();

    // set first column settings
    dataGrid.column(0)
        .title('#')
        .width(30)
        .cellTextSettings({hAlign: 'center'});

    // set second column settings
    dataGrid.column(1)
        .title('Person')
        .width(120)
        .cellTextSettings({hAlign: 'left'})
        .format(function () {
            return this.name;
        });

   chart.getTimeline().horizontalScrollBar().enabled(false);

    // set container id for the chart
    chart.container('container');

    // initiate chart drawing
    chart.draw();

    // zoom chart to specified date after finished rendering
    chart.zoomTo(start, end);

//button scroll handlers
$('#forward').click(function() {
start +=1000000000;
    end +=1000000000;
    chart.zoomTo(start, end);
});
    
$('#backward').click(function() {
start -=1000000000;
    end -=1000000000;
    chart.zoomTo(start, end);
});
});