Gantt Demo

author(s): Lars Cabrera

HTML

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

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

CSS

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

JavaScript

const day = 1000 * 60 * 60 * 24;
Highcharts.ganttChart('container', {
  type: "gantt",
  chart: {
    height: 400
  },
  series: [{
    name: "Projects",
    data: Array.from({ length: 200 }, (_, i) => ({
      name: `Project ${i}`,
      start: Date.now() + (day * i),
      end: Date.now() + (day * (i + Math.random() * 100))
    }))
  }],
  plotOptions: {
    series: {
      dragDrop: {
        draggableX: true,
        // dragPrecisionX: 1000 * 60 * 60 * 24 * 30 // approximately 1 month
      }
    }
  },
  navigator: {
      enabled: true,
      series: {
        type: "gantt",
        pointPlacement: 0.5,
        pointPadding: 0.25
      },
      yAxis: {
        min: 0,
        max: 3,
        reversed: true,
        categories: [],
      }
    },
    yAxis: {
      scrollbar: {
        enabled: true,
        showFull: false
      },
      max: 10
  }
});