Sample

by Black Label

HTML

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

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

CSS

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

JavaScript

// THE CHART
Highcharts.ganttChart('container', {
chart: {
  events: {
    load() {
      let from = this.xAxis[0].toPixels(Date.UTC(2014, 10, 21)),
        to = this.xAxis[0].toPixels(Date.UTC(2014, 10, 22)),
        width = to - from,
        rowStart = this.yAxis[0].toPixels(0.5),
        rowHeight = this.yAxis[0].toPixels(1) - this.yAxis[0].toPixels(0);

      this.renderer.rect(from, rowStart, width, rowHeight)
        .attr({
          fill: '#ff0000',
          zIndex: 0
        }).add()
    }
  }
},

title: {
  text: 'Gantt Chart with Progress Indicators'
},

yAxis: {
  categories: ['1', '2', '3']
},

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      verticalAlign: "top",
      format: "{point.custom.label}"
    }
  }
},

series: [{
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 20)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 25)
    }],
    data: [{
      y: 0,
      x: Date.UTC(2014, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2014, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    name: 'Project 1',
    type: 'line',
    zoneAxis: 'x',
    zones: [{
      value: Date.UTC(2014, 10, 28)
    }, {
      dashStyle: 'dot',
      value: Date.UTC(2014, 10, 29)
    }],
    data: [{
      x: Date.UTC(2014, 10, 25, 16),
      y: 0,
      custom: {
        label: 3
      }
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 0,
      custom: {
        label: 4
      }
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    data: [{
      x: Date.UTC(2014, 10, 25, 16),
      y: 1,
      custom: {
        label: 3
      }
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 1,
      custom: {
        label: 4
      }
    }]
  },
  {
    type: 'line',
    data: [{
      x: Date.UTC(2014, 10, 25),
      y: 2
    }, {
      x: Date.UTC(2014, 10, 29),
      y: 2,
    }]
  }]
});