Gantt Charts - Highcharts

Gantt charts are specialized project management charts that display tasks over time, showing dependencies, progress, and milestones.

Overview

Gantt charts in Highcharts provide:

Task scheduling and timelines
Dependencies between tasks
Progress tracking
Milestones
Hierarchical task structure
Resource allocation
Interactive editing

Basic Gantt Chart

const day = 24 * 36e5;
const today = Math.floor(Date.now() / day) * day;

Highcharts.ganttChart('container', {
  title: {
    text: 'Simple Gantt Chart'
  },
  xAxis: {
    currentDateIndicator: true,
    min: today - 2 * day,
    max: today + 18 * day
  },
  series: [{
    name: 'Project 1',
    data: [{
      name: 'Planning',
      start: today,
      end: today + 5 * day
    }, {
      name: 'Development',
      start: today + 5 * day,
      end: today + 15 * day
    }, {
      name: 'Testing',
      start: today + 15 * day,
      end: today + 18 * day
    }]
  }]
});

Project Management Example

Based on ~/workspace/source/samples/gantt/demo/project-management/demo.js:1-281:

const day = 24 * 36e5;
const today = Math.floor(Date.now() / day) * day;

Highcharts.ganttChart('container', {
  chart: {
    plotBackgroundColor: 'rgba(128,128,128,0.02)',
    plotBorderColor: 'rgba(128,128,128,0.1)',
    plotBorderWidth: 1
  },
  title: {
    text: 'Gantt Project Management'
  },
  plotOptions: {
    series: {
      borderRadius: '50%',
      connectors: {
        dashStyle: 'ShortDot',
        lineWidth: 2,
        radius: 5,
        startMarker: {
          enabled: false
        }
      },
      groupPadding: 0,
      dataLabels: [{
        enabled: true,
        align: 'left',
        format: '{point.name}',
        padding: 10,
        style: {
          fontWeight: 'normal',
          textOutline: 'none'
        }
      }, {
        enabled: true,
        align: 'right',
        format: '{#if point.completed}{(multiply point.completed.amount 100):.0f}%{/if}',
        padding: 10,
        style: {
          fontWeight: 'normal',
          textOutline: 'none',
          opacity: 0.6
        }
      }]
    }
  },
  xAxis: {
    currentDateIndicator: {
      color: '#2caffe',
      dashStyle: 'ShortDot',
      width: 2
    },
    min: today - 3 * day,
    max: today + 18 * day
  },
  yAxis: {
    grid: {
      borderWidth: 0
    },
    gridLineWidth: 0,
    staticScale: 30
  },
  series: [{
    name: 'Offices',
    data: [{
      name: 'New offices',
      id: 'new_offices',
      owner: 'Peter'
    }, {
      name: 'Prepare office building',
      id: 'prepare_building',
      parent: 'new_offices',
      start: today - (2 * day),
      end: today + (6 * day),
      completed: {
        amount: 0.2
      },
      owner: 'Linda'
    }, {
      name: 'Inspect building',
      id: 'inspect_building',
      dependency: 'prepare_building',
      parent: 'new_offices',
      start: today + 6 * day,
      end: today + 8 * day,
      owner: 'Ivy'
    }, {
      name: 'Passed inspection',
      id: 'passed_inspection',
      dependency: 'inspect_building',
      parent: 'new_offices',
      start: today + 9.5 * day,
      milestone: true,
      owner: 'Peter'
    }]
  }],
  tooltip: {
    pointFormat: '<span style="font-weight: bold">{point.name}</span><br>' +
      '{point.start:%e %b}' +
      '{#unless point.milestone} → {point.end:%e %b}{/unless}' +
      '<br>' +
      '{#if point.completed}' +
      'Completed: {multiply point.completed.amount 100}%<br>' +
      '{/if}' +
      'Owner: {#if point.owner}{point.owner}{else}unassigned{/if}'
  }
});

Hierarchical Tasks

Organize tasks in parent-child relationships:

Highcharts.ganttChart('container', {
  title: {
    text: 'Hierarchical Gantt Chart'
  },
  series: [{
    name: 'Project',
    data: [{
      id: 'phase1',
      name: 'Phase 1',
      owner: 'Team A'
    }, {
      id: 'task1.1',
      parent: 'phase1',
      name: 'Task 1.1',
      start: today,
      end: today + 3 * day,
      owner: 'John'
    }, {
      id: 'task1.2',
      parent: 'phase1',
      name: 'Task 1.2',
      start: today + 3 * day,
      end: today + 6 * day,
      owner: 'Jane'
    }, {
      id: 'phase2',
      name: 'Phase 2',
      owner: 'Team B'
    }, {
      id: 'task2.1',
      parent: 'phase2',
      name: 'Task 2.1',
      dependency: 'task1.2',
      start: today + 6 * day,
      end: today + 10 * day,
      owner: 'Bob'
    }]
  }]
});

Progress Indicator

Show task completion status:

Highcharts.ganttChart('container', {
  title: {
    text: 'Tasks with Progress'
  },
  series: [{
    name: 'Tasks',
    data: [{
      name: 'Design',
      start: today,
      end: today + 5 * day,
      completed: {
        amount: 1.0,  // 100% complete
        fill: '#4CAF50'
      }
    }, {
      name: 'Development',
      start: today + 5 * day,
      end: today + 15 * day,
      completed: {
        amount: 0.6,  // 60% complete
        fill: '#2196F3'
      }
    }, {
      name: 'Testing',
      start: today + 15 * day,
      end: today + 20 * day,
      completed: {
        amount: 0.2,  // 20% complete
        fill: '#FFC107'
      }
    }]
  }]
});

Milestones

Mark important deadlines:

Highcharts.ganttChart('container', {
  title: {
    text: 'Project with Milestones'
  },
  series: [{
    name: 'Tasks',
    data: [{
      name: 'Planning',
      start: today,
      end: today + 5 * day
    }, {
      name: 'Planning Complete',
      start: today + 5 * day,
      milestone: true,
      marker: {
        symbol: 'diamond'
      }
    }, {
      name: 'Development',
      start: today + 5 * day,
      end: today + 15 * day
    }, {
      name: 'Beta Release',
      start: today + 15 * day,
      milestone: true
    }, {
      name: 'Testing',
      start: today + 15 * day,
      end: today + 20 * day
    }, {
      name: 'Launch',
      start: today + 20 * day,
      milestone: true
    }]
  }]
});

Dependency Types

Define different dependency relationships:

Highcharts.ganttChart('container', {
  title: {
    text: 'Complex Dependencies'
  },
  series: [{
    name: 'Tasks',
    data: [{
      id: 'task1',
      name: 'Task 1',
      start: today,
      end: today + 5 * day
    }, {
      id: 'task2',
      name: 'Task 2 (Finish to Start)',
      dependency: {
        to: 'task1',
        type: 'finishToStart'
      },
      start: today + 5 * day,
      end: today + 10 * day
    }, {
      id: 'task3',
      name: 'Task 3 (Start to Start)',
      dependency: {
        to: 'task1',
        type: 'startToStart'
      },
      start: today,
      end: today + 8 * day
    }]
  }]
});

Current Date Indicator

Show the current date on the timeline:

Highcharts.ganttChart('container', {
  xAxis: {
    currentDateIndicator: {
      color: '#2caffe',
      dashStyle: 'ShortDot',
      width: 2,
      label: {
        format: '%a, %b %d',
        style: {
          fontWeight: 'bold',
          color: '#2caffe'
        }
      }
    }
  },
  series: [{
    data: tasksData
  }]
});

Resource Allocation

Show who is assigned to each task:

Highcharts.ganttChart('container', {
  title: {
    text: 'Resource Allocation'
  },
  yAxis: {
    labels: {
      formatter: function () {
        const point = this.chart.series[0].data[this.pos];
        return point ? `${point.name}<br><small>${point.owner}</small>` : '';
      }
    }
  },
  series: [{
    name: 'Tasks',
    data: [{
      name: 'Design UI',
      owner: 'John Doe',
      start: today,
      end: today + 5 * day
    }, {
      name: 'Backend API',
      owner: 'Jane Smith',
      start: today,
      end: today + 10 * day
    }, {
      name: 'Integration',
      owner: 'Bob Johnson',
      start: today + 10 * day,
      end: today + 15 * day
    }]
  }]
});

Use Cases

Project Management

Software development
Construction planning
Event planning
Product launches

Resource Planning

Team schedules
Equipment allocation
Manufacturing processes
Production timelines

Configuration Options

Key Gantt-specific options from ~/workspace/source/ts/Series/Gantt/GanttSeriesDefaults.ts:41-141:

grouping

boolean

default:"false"

Whether to group tasks or render independently.

connectors

object

Options for the lines connecting dependent tasks.

connectors: {
  type: 'simpleConnect',
  dashStyle: 'ShortDot',
  lineWidth: 2,
  radius: 0,
  startMarker: {
    enabled: true,
    symbol: 'arrow-filled',
    radius: 4
  }
}

Data Format

Gantt chart data points require start and end times:

data: [{
  id: 'task1',
  name: 'Task Name',
  start: Date.UTC(2024, 0, 1),  // or timestamp
  end: Date.UTC(2024, 0, 5),
  completed: {
    amount: 0.5  // 50% complete
  },
  milestone: false,
  dependency: 'previousTask',
  parent: 'parentTask',
  owner: 'Assignee Name'
}]

Gantt charts require the Highcharts Gantt library (highcharts-gantt.js).

For large projects with hundreds of tasks, consider using data grouping or virtualization for better performance.

​Overview

​Basic Gantt Chart

​Project Management Example

​Hierarchical Tasks

​Progress Indicator

​Milestones

​Dependency Types

​Current Date Indicator

​Resource Allocation

​Use Cases

Project Management

Resource Planning

​Configuration Options

​Data Format

Overview

Basic Gantt Chart

Project Management Example

Hierarchical Tasks

Progress Indicator

Milestones

Dependency Types

Current Date Indicator

Resource Allocation

Use Cases

Configuration Options

Data Format