JSFiddle - React, Tailwind, and code Playground

by b_g_v

HTML

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

<div id="container1"></div>

CSS

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

JavaScript

const chart = Highcharts.ganttChart('container1', {
  yAxis: {
    uniqueNames: true
  },
  scrollbar: {
    enabled: true
  },
  rangeSelector: {
    enabled: true,
    selected: 0
  },
  series: [{
    name: 'Project 1',
    data: [{
      start: Date.UTC(2017, 11, 1),
      end: Date.UTC(2018, 1, 2),
      completed: {
        amount: 0.95
      },
      name: 'Prototyping'
    }, {
      start: Date.UTC(2018, 1, 2),
      end: Date.UTC(2018, 11, 5),
      completed: {
        amount: 0.5
      },
      name: 'Development'
    }, {
      start: Date.UTC(2018, 11, 8),
      end: Date.UTC(2018, 11, 9),
      completed: {
        amount: 0.15
      },
      name: 'Testing'
    }, {
      start: Date.UTC(2018, 11, 9),
      end: Date.UTC(2018, 11, 19),
      completed: {
        amount: 0.3,
        fill: '#fa0'
      },
      name: 'Development'
    }, {
      start: Date.UTC(2018, 11, 10),
      end: Date.UTC(2018, 11, 23),
      name: 'Testing'
    }, {
      start: Date.UTC(2018, 11, 25, 8),
      end: Date.UTC(2018, 11, 25, 16),
      name: 'Release'
    }]
  }]
});
/*
const scrollbar = chart.scrollbar,
	track = scrollbar.track.element,
  bar = scrollbar.scrollbar.element,
  moveScrollbar = function(e) {
    const normalizedEvent = scrollbar.chart.pointer.normalize(e),
      options = scrollbar.options,
      direction = options.vertical ? 'chartY' : 'chartX';
    let initPositions,
      scrollPosition,
      chartPosition,
      change = e.deltaY / 1000;

    scrollbar.mouseDownHandler(e)

    initPositions = scrollbar.initPositions

    if (scrollbar.grabbedCenter && (!e.touches || e.touches[0][direction] !== 0)) {
      chartPosition = scrollbar.cursorToScrollbarPosition(normalizedEvent)[direction];
      scrollPosition = scrollbar[direction];

      scrollbar.hasDragged = true;
      scrollbar.updatePosition(initPositions[0] + change, initPositions[1] + change);

      if (scrollbar.hasDragged) {
        Highcharts.fireEvent(scrollbar, 'changed', {
     ...