JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/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();

    chart.data(getData());

    chart.zoomLevel(1)
        .timeTrackingMode('activityPerChart') ;   //Row height depends on resource chart time

    //set working an lunch schedule
    chart.calendar().availabilities([{
        'each': 'day',
        'from': 12,
        'to': 24,
        'isWorking': true
    }]);

    chart.defaultMinutesPerDay(120);

    chart.logo().fill({
        src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHjw3VmzH2isplbsRuE8oOTfavz3IBWu4d7r6wg33iznyQZf9k", mode : "fit"
    });


    //set appearence of resource types
    var resourceList = chart.resourceList();
    resourceList.types({
        fontColor: "#4CAF50",
        fontSize: 12
    });

    // Set images settings.
    resourceList.images().size(85);

    // Set tags settings.
    resourceList.tags()
        .background('#f51800')
        .fontColor('#fff');

    // Set description settings
    resourceList.descriptions({
        fontColor: "#0616af",
        fontSize: 12
    });

    //Set only timeline header settings
    var timeLine = chart.timeLine();
    timeLine.textWrap("byWord");
    timeLine.fontSize(15);

    // Get activities and set appearance
    var activities = chart.activities();
    activities
        .stroke("2 #000000")
        .fill("#f51800", 0.3);

    //set appearance of activity labels
    activities.labels()
        .fontSize(12)
        .textWrap("byWord");

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

function getData() {
    return [
        {
            "name": "Typical russian",
            "description": "hero of the song",
            "image": "https://pp.userapi.com/c629330/v629330286/49b13/jVsSU2eXHfE.jpg",
            "tags" : ["mad russians", "human", "body"],
            "activities": [
                {
                    "name": "Having rest of meal and drinks",
              ...