JSFiddle - React, Tailwind, and code Playground

by Gert Vaartjes

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>

CSS

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

JavaScript

Highcharts.ganttChart('container', {
  title: {
    text: 'Tweak a single dependency'
  },
  pathfinder: {
  	lineColor: 'black',
    marker: {
    	color: 'black'
    }
  },
  series: [{
    name: 'Project 1',
    data: [{
      id: 'p1',
      name: 'project 1',
      pointWidth: 3,
      color: 'black'
    }, {
      id: '1A',
      name: 'task A',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 20),
      parent: 'p1'
    }, {
      id: '1B',
      name: 'task B',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
      dependency: '1A',
      parent: 'p1'
    }]
  }, {
    name: 'Project 2',
    pathfinder: {
      type: 'fastAvoid',
      lineColor: 'red',
      dashStyle: 'Dash'      
    },
    data: [{
      id: 'p2',
      name: 'Project 2',
      pointWidth: 3,
      color: 'black'
    }, {
      id: '2A',
      name: 'task A',
      start: Date.UTC(2014, 10, 23),
      end: Date.UTC(2014, 10, 26),
      parent: 'p2',
      dependency: { // set options  for a single dependency
      	to: '1B',
      	type: 'fastAvoid',
        lineColor: 'blue',
        startMarker: {
        	symbol: 'circle',
          color: 'blue'
        }
      }
    }, {
    	id: '2B',
      name: 'task B',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      dependency: ['1B', '2A'],
      parent: 'p2'
    }]
  }]
});