Progress indicator

author(s): Lars Cabrera

by andypotanin

HTML

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

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

CSS

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

JavaScript

var chart = Highcharts.ganttChart('container', {
  xAxis: {
    min: Date.UTC(2023, 05, 20),
    max: Date.UTC(2023, 05, 26)
  },
  yAxis: {
    categories: [
      'Transport',
      'Check-in',
      'Amenity',
      'Orientation',
      'Meal',
      'Entertainment',
      'Lessons',
      'Excursion'
    ],
  },
  series: [{
    name: 'Project 1',
    data: [{
      name: 'Transportation from the airport to the resort for arriving guests.',
      start: Date.UTC(2023, 5, 20, 9),
      end: Date.UTC(2023, 5, 20, 15)
    }, {
      name: 'Check-in process for arriving guests.',
      start: Date.UTC(2023, 5, 20, 12),
      end: Date.UTC(2023, 5, 20, 17)
    }, {
      name: 'Courts are open for play.',
      start: Date.UTC(2023, 5, 20, 13),
      end: Date.UTC(2023, 5, 20, 21)
    }, {
      name: 'Event Orientation',
      start: Date.UTC(2023, 5, 20, 16, 45),
      end: Date.UTC(2023, 5, 20, 17, 20)
    }, {
      name: 'Dinner',
      start: Date.UTC(2023, 5, 20, 17, 30),
      end: Date.UTC(2023, 5, 20, 19)
    }, {
      name: 'Entertainment',
      start: Date.UTC(2023, 5, 20, 18),
      end: Date.UTC(2023, 5, 20, 19)
    }, {
      name: 'Lessons in Meetgin room',
      start: Date.UTC(2023, 5, 20, 19, 30),
      end: Date.UTC(2023, 5, 20, 20, 45)
    }, {
      name: 'Open courts.',
      start: Date.UTC(2023, 5, 21, 8),
      end: Date.UTC(2023, 5, 21, 21)
    }, {
      name: 'Breakfast in ballroom.',
      start: Date.UTC(2023, 5, 21, 8),
      end: Date.UTC(2023, 5, 21, 10)
    }, {
      name: 'Lessons on Court',
      start: Date.UTC(2023, 5, 21, 10),
      end: Date.UTC(2023, 5, 21, 12)
    }, {
      name: 'Lunch provided.',
      start: Date.UTC(2023, 5, 21, 12),
      end: Date.UTC(2023, 5, 21, 13, 30)
    }, {
      name: 'Dinner',
      start: Date.UTC(2023, 5, 21, 17),
      end: Date.UTC(2023, 5, 21, 19)
    }, {
      name: 'Q&A Session with Pros',
      start: Date.UTC(2023, 5, 21, 17, 30),
      end: Date.UTC(2023, 5, 21, 19)
    }, {
...