JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 180px"></div>

JavaScript

// 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 + task.intervals[j + 1].from) / 2, null]
...