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/resource-charts/bus-schedule/data.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 () {
    chart = anychart.resource();
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples-data/resource-charts/bus-schedule/data.js
    chart.data(data());
    chart.timeTrackingMode('availabilityPerChart')
            .currentStartDate('2016-10-01')
            .pixPerHour(20);

    var activities = chart.activities();
    activities.stroke('#fff');
    activities.labels().padding(10);

    chart.grid()
            .oddHolidayHatchFill('backwardDiagonal', 'green 0.25', '1.5', '15')
            .evenHolidayHatchFill('backwardDiagonal', 'green 0.25', '1.5', '15');

    var resourceList = chart.resourceList();
    resourceList.names({
                fontColor: "#008CC3"
            })
            .types({
                fontColor: "#606166",
                fontSize: 13,
                fontWeight: 700
            })
            .descriptions({
                textWrap: 'byWord',
                fontColor: "#606166",
                fontWeight: 400
            });
    resourceList.descriptions().margin().right(15);

    // Set tags settings.
    resourceList.tags()
            .background('#E5007D')
            .fontColor('#fff')
            .fontSize(12);
            
    chart.listen("mouseOver", function (e) {
        console.log('wish to be here');
    });


    // set container id for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});