Gantt Project Management

author(s): Jon Arild Nygård

by b_g_v

HTML

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

CSS

#container {
  width: 450px;
  max-width: 800px;
  min-width: 500px;
  margin: 1em auto;
  height: 300px;
  min-height: 300px;
  max-height: 300px;
}

JavaScript

var today = new Date(),
  day = 1000 * 60 * 60 * 24;

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


// THE CHART
Highcharts.ganttChart('container', {
  chart: {
    //width: 600,
    //height: 300,
    scrollablePlotArea: {
        //minWidth: 600,
        //maxWidth: 1500,
        //width: 600,
        //minHeight: 300,
        //height: 300
    },

    events: {
      load() {
        var chart = this,
          series = chart.series[0];
/*
        series.points.forEach(function(point) {
          point.dataLabel.text.translate(0, -25)
          point.graphic.translate(0, -25);
        });*/
      }
    }
  },
  title: {
    text: 'Grouping tasks vertically'
  },
  xAxis: {
      scrollbar: {
      enabled: true
    },
  },
  yAxis: {
    max: 2,
    scrollbar: {
      enabled: true
    },

    // categories: [],
    uniqueNames: true,

    type: 'category',
    breaks: [{
      breakSize: 0.5,
      from: 0,
      to: 0
    }],
    grid: {
      columns: [{
        title: {
          text: 'First Column'
        },
        useHTML: true,
        labels: {
          format: 'Cell',
          align: 'center',
          style: {
            fontWeight: 'bold'
          }
        }
      }]
    }
  },
  plotOptions: {
    gantt: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          if (this.point.name) {
            return this.point.name
          }
        },
      },
    }
  },

  series: [{
    name: 'Resource 1',
    data: [{
      name: 'Task A',
      y: 0,
      start: today - (2 * day),
      end: today + (6 * day)
    }, {
      name: 'Task B',
      y: 0.6,
      start: today - (1 * day),
      end: today + (6 * day),
      color: 'rgba(140, 140, 140, 0.7)'
    }, {
      name: 'Task C',
      y: 0,
      start: today + (13 * day),
      end: today + (17 * day)
    }]
  }, {
    name: 'Resource 2',
    data: [{
  ...