Gantt Chart with Progress Indicator

author(s): Lars Cabrera

HTML

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

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

JavaScript

Highcharts.ganttChart('container', {
      title: {
        text: 'How can Table View scrollable be?'
      },
      subtitle: {
        text: 'Table View is not scrollable'
      },
      navigator: {
        enabled: true,
        // liveRedraw: true,
        series: {
          type: 'areaspline',
          fillOpacity: 0.05,
          dataGrouping: {
            smoothed: true
          },
          color: '#FF00FF',
          lineWidth: 2,
          marker: {
            enabled: true
          }
        },
        yAxis: {
          min: 0,
          max: 3,
          reversed: true,
          categories: []
        }
      },
      scrollbar: {
        enabled: true
      },
      rangeSelector: {
        enabled: true,
        // 0-1m; 1-3m; 2-6m; 3-YTD(Year to date); 4-1y; 5-all
        selected: 5
      },
      xAxis: [
        {
          labels: {
            format: 'Custom Day {value:%w}' // day of the week
          },
          grid: {
            // default setting
            enabled: true
          },
          tickInterval: 1000 * 60 * 60 * 24 // Day
        },
        {
          labels: {
            format: 'Custom Week {value:%W}'
          },
          tickInterval: 1000 * 60 * 60 * 24 * 7 // week
        }
      ],
      yAxis: {
        type: 'category',
        grid: {
          borderColor: '#3a5d96',
          columns: [
            {
              title: {
                text: 'Project',
                rotation: 0,
                y: -15,
                x: -15
              },
              labels: {
                format: '{point.name}'
              }
            },
            {
              title: {
                text: 'Assignee',
                rotation: 0,
                y: -15,
                x: -15
              },
              labels: {
                format: '{point.assignee}'
              }
            },
            {
              title: {
                text: 'Start date',
                rotation: 0,
  ...