Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

Highcharts.ganttChart('container', {
  yAxis: {
    uniqueNames: true,
    allowOverlap: false,
    labels: {
      align: 'right',
      style: {
        transform: 'translateX(-35px)'
      }
    }
  },
  series: [{
    data: [{
        id: '1',
        start: Date.UTC(2023, 0, 01),
        name: 'Prototyping',
        milestone: true,
      },
      {
        id: '2',
        start: Date.UTC(2023, 06, 20),
        name: 'Development',
        milestone: true,
      },
      {
        id: '3',
        start: Date.UTC(2023, 07, 20),
        name: 'Development & Testing',
        milestone: true,
      },
      {
        id: '4',
        start: Date.UTC(2023, 08, 25),
        name: 'Development ',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2023, 08, 05),
        name: 'Prototyping',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2023, 11, 31),
        name: 'Prototyping',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2024, 05, 31),
        name: 'Prototyping',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2023, 11, 31),
        name: 'Development',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2024, 05, 31),
        name: 'Testing',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2023, 11, 31),
        name: 'Development1',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2024, 05, 31),
        name: 'Testing1',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2023, 11, 31),
        name: 'Development2',
        milestone: true,
      },
      {
        id: '5',
        start: Date.UTC(2024, 05, 31),
        name: 'Testing2',
        milestone: true,
      },
    ]
  }]
});