JSFiddle - React, Tailwind, and code Playground

by myBrand_center

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

// Set to 00:00:00:000 today
var today = new Date(),
    day = 1000 * 60 * 60 * 24,
    map = Highcharts.map,
    dateFormat = Highcharts.dateFormat,
    series,
    series2,
    stores,
    cars;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();





series = branded_assets.map(function (branded_asset, i) {
  var contentdata = branded_asset.content.map(function (content) {
    return {
        name: content.name,
        start: content.start,
        end: content.end,
        y:i
        
      };
  });

	return {
    		id : branded_asset.id,    
        name: branded_asset.name,
        data: contentdata
        
  };

});

Highcharts.ganttChart('container', {
    series: series,
    title: {
        text: 'Branded asset content planning'
    },
    tooltip: {
        pointFormat: '<span>Campaign: {point.name}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
    },
    xAxis: {
        min: today.getTime() - (2 * day),
        max: today.getTime() + (32 * day),
        currentDateIndicator: true
    },
    yAxis: {
        type: 'category',
        grid: {
            columns: [{
                title: {
                    text: ''
                },
                categories: map(series, function (s) {
                    return s.name;
                })
            } ]
        }
    }
});