Sample

by Fmcg

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

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  yAxis: {
    categories: ['1', '2']
  },
  xAxis: [{

    tickInterval: 1000 * 60 * 60 * 24,
    tickmarkPlacement: 'on',
    gridLineWidth: 1

  }, {

    tickInterval: 1000 * 60 * 60 * 24 * 30,
    tickmarkPlacement: 'on',
    gridLineWidth: 1

  }],

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        verticalAlign: "top",
        format: "{point.custom.label}"
      }
    }
  },
  series: [{
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }, {
    groupPadding: 1,
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 18),
      custom: {
        label: 1
      }
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 25, 12),
      custom: {
        label: 2
      }
    }]
  }]
});