JSFiddle - React, Tailwind, and code Playground

by qwweee7467

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 180px"></div>
<div id="container2" style="height: 180px"></div>
<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container4" style="height: 180px"></div>
<div id="container5" style="height: 400px"></div>
<div id="container6" style="height: 600px; width: 300px"></div>

JavaScript

/* Hightcharts Gantt chart sample */


// Define tasks
var tasks = [{
    name: 'Sleep',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 0),
        to: Date.UTC(0, 0, 0, 6)
    }, {
        from: Date.UTC(0, 0, 0, 22),
        to: Date.UTC(0, 0, 0, 24)
    }]
}, {
    name: 'Family time',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 6),
        to: Date.UTC(0, 0, 0, 8)
    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 22)
    }]
}, {
    name: 'Eat',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 7),
        to: Date.UTC(0, 0, 0, 8),
        label: 'Breakfast'
    }, {
        from: Date.UTC(0, 0, 0, 12),
        to: Date.UTC(0, 0, 0, 12, 30)
    }, {
        from: Date.UTC(0, 0, 0, 16),
        to: Date.UTC(0, 0, 0, 17),
        label: 'Dinner'
    }, {
        from: Date.UTC(0, 0, 0, 20, 30),
        to: Date.UTC(0, 0, 0, 21)
    }]
}, {
    name: 'Work',
    intervals: [{ // From-To pairs
        from: Date.UTC(0, 0, 0, 8),
        to: Date.UTC(0, 0, 0, 16)
    }]
}];

// Define milestones
var milestones = [{
    name: 'Get to bed',
    time: Date.UTC(0, 0, 0, 22),
    task: 1,
    marker: {
        symbol: 'triangle',
        lineWidth: 1,
        lineColor: 'black',
        radius: 8
    }
}];

// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function (i, task) {
    var item = {
        name: task.name,
        data: []
    };
    $.each(task.intervals, function (j, interval) {
        item.data.push({
            x: interval.from,
            y: i,
            label: interval.label,
            from: interval.from,
            to: interval.to
        }, {
            x: interval.to,
            y: i,
            from: interval.from,
            to: interval.to
        });

        // add a null value between intervals
        if (task.intervals[j + 1]) {
            item.data.push(
            [(interval.to +...