Highcharts Gantt

Highcharts Gantt is a specialized charting library for creating interactive Gantt charts that visualize project schedules, task dependencies, and resource allocation. Built on Highcharts Core, it provides powerful features for project management visualization.

Overview

Highcharts Gantt provides comprehensive project visualization features:

Task Dependencies: Visual connectors showing relationships between tasks
Progress Tracking: Display completion percentage for each task
Resource Management: Allocate and track resources across tasks
Drag and Drop: Interactive task editing and rescheduling
Tree Grid: Hierarchical task organization with collapsible groups
Milestones: Mark important project events
Custom Connectors: Flexible pathfinding algorithms for dependencies

Installation

npm install highcharts

ES6 Module Import

import Highcharts from 'highcharts/highcharts-gantt';

// Or as a module with Highcharts Core
import Highcharts from 'highcharts';
import ganttModule from 'highcharts/modules/gantt';

ganttModule(Highcharts);

Getting Started

Create your first Gantt chart with the Highcharts.ganttChart() constructor:

Create a container element

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

Define your tasks

const tasks = [{
  name: 'Project Planning',
  id: 'planning',
  start: Date.UTC(2024, 0, 1),
  end: Date.UTC(2024, 0, 14)
}, {
  name: 'Development',
  id: 'dev',
  start: Date.UTC(2024, 0, 15),
  end: Date.UTC(2024, 1, 28),
  dependency: 'planning'
}, {
  name: 'Testing',
  id: 'test',
  start: Date.UTC(2024, 2, 1),
  end: Date.UTC(2024, 2, 14),
  dependency: 'dev'
}];

Create the Gantt chart

Highcharts.ganttChart('container', {
  title: {
    text: 'Project Timeline'
  },
  xAxis: {
    currentDateIndicator: true
  },
  series: [{
    name: 'Project Tasks',
    data: tasks
  }]
});

Task Configuration

Each task in a Gantt chart can have multiple properties:

{
  id: 'task-1',              // Unique identifier
  name: 'Task Name',          // Display name
  start: Date.UTC(2024, 0, 1), // Start date
  end: Date.UTC(2024, 0, 14),  // End date
  completed: 0.5,             // Progress (0-1)
  dependency: 'task-0',       // Dependent task ID
  parent: 'phase-1',          // Parent task for grouping
  milestone: false,           // Is this a milestone?
  color: '#FF0000'            // Custom color
}

Key Features

Task Dependencies

Visualize relationships between tasks with connector lines.

Dependency Types

Dependencies show which tasks must be completed before others can start, helping identify the critical path in your project.

data: [{
  id: 'design',
  name: 'Design Phase',
  start: Date.UTC(2024, 0, 1),
  end: Date.UTC(2024, 0, 14)
}, {
  id: 'development',
  name: 'Development',
  start: Date.UTC(2024, 0, 15),
  end: Date.UTC(2024, 1, 28),
  dependency: 'design'  // Single dependency
}, {
  id: 'testing',
  name: 'Testing',
  start: Date.UTC(2024, 2, 1),
  end: Date.UTC(2024, 2, 14),
  dependency: ['development', 'design']  // Multiple dependencies
}]

Custom Dependency Connectors

Customize the appearance and routing of dependency connectors:

pathfinder: {
  type: 'simpleConnect', // or 'straight', 'fastAvoid'
  lineWidth: 2,
  lineColor: '#0066cc',
  dashStyle: 'Solid',
  marker: {
    enabled: true,
    symbol: 'arrow',
    width: 8,
    height: 8,
    color: '#0066cc'
  }
}

Pathfinding Algorithms

simpleConnect

Default algorithm using right angles only

straight

Direct straight line between tasks

fastAvoid

Avoids overlapping other tasks

Progress Tracking

Display task completion percentage:

data: [{
  id: 'task-1',
  name: 'Development',
  start: Date.UTC(2024, 0, 1),
  end: Date.UTC(2024, 1, 1),
  completed: {
    amount: 0.75  // 75% complete
  }
}]

// Customize completed appearance
plotOptions: {
  gantt: {
    dataLabels: {
      enabled: true,
      format: '{point.completed.amount:.0%}'
    }
  }
}

Tree Grid and Grouping

Organize tasks hierarchically:

data: [{
  id: 'phase-1',
  name: 'Phase 1: Planning'
}, {
  id: 'task-1',
  name: 'Research',
  parent: 'phase-1',
  start: Date.UTC(2024, 0, 1),
  end: Date.UTC(2024, 0, 7)
}, {
  id: 'task-2',
  name: 'Requirements',
  parent: 'phase-1',
  start: Date.UTC(2024, 0, 8),
  end: Date.UTC(2024, 0, 14)
}, {
  id: 'phase-2',
  name: 'Phase 2: Development'
}, {
  id: 'task-3',
  name: 'Coding',
  parent: 'phase-2',
  start: Date.UTC(2024, 0, 15),
  end: Date.UTC(2024, 1, 28)
}]

Milestones

Mark important project events:

data: [{
  id: 'milestone-1',
  name: 'Project Kickoff',
  start: Date.UTC(2024, 0, 1),
  milestone: true,
  color: '#ff0000'
}, {
  id: 'task-1',
  name: 'Development',
  start: Date.UTC(2024, 0, 2),
  end: Date.UTC(2024, 1, 1),
  dependency: 'milestone-1'
}, {
  id: 'milestone-2',
  name: 'Release',
  start: Date.UTC(2024, 1, 1),
  milestone: true,
  dependency: 'task-1',
  color: '#00ff00'
}]

Resource Management

Allocate resources to tasks:

yAxis: [{
  title: {
    text: 'Tasks'
  },
  categories: ['Planning', 'Development', 'Testing'],
  grid: {
    columns: [{
      title: {
        text: 'Task'
      },
      labels: {
        format: '{point.name}'
      }
    }, {
      title: {
        text: 'Assignee'
      },
      labels: {
        format: '{point.assignee}'
      }
    }, {
      title: {
        text: 'Duration'
      },
      labels: {
        format: '{(divide (subtract point.end point.start) 86400000):.0f} days'
      }
    }]
  }
}],

data: [{
  name: 'Development',
  start: Date.UTC(2024, 0, 1),
  end: Date.UTC(2024, 1, 1),
  assignee: 'John Doe'
}]

Advanced Features

Current Date Indicator

Show a line marking today’s date:

xAxis: {
  currentDateIndicator: {
    color: '#ff0000',
    width: 2,
    label: {
      format: '%a, %b %d %Y, %H:%M'
    }
  }
}

Custom Time Units

Configure the time scale:

xAxis: {
  min: Date.UTC(2024, 0, 1),
  max: Date.UTC(2024, 11, 31),
  units: [
    ['day', [1]],
    ['week', [1]],
    ['month', [1]]
  ],
  labels: {
    format: '{value:%e. %b}'
  }
}

Drag and Drop

Enable interactive task editing:

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

plotOptions: {
  gantt: {
    dragDrop: {
      draggableX: true,
      draggableY: false,
      dragPrecisionX: 1000 * 60 * 60 * 24 // 1 day
    }
  }
},

series: [{
  data: tasks,
  point: {
    events: {
      drop: function(e) {
        console.log('Task moved:', this.name, 'New start:', new Date(e.newPoint.start));
      }
    }
  }
}]

Complete Example

Here’s a comprehensive Gantt chart example:

Highcharts.ganttChart('container', {
  title: {
    text: 'Software Development Project'
  },
  
  xAxis: {
    min: Date.UTC(2024, 0, 1),
    max: Date.UTC(2024, 5, 30),
    currentDateIndicator: {
      color: '#ff0000',
      width: 2,
      label: {
        format: '%a, %b %d'
      }
    }
  },
  
  yAxis: {
    uniqueNames: true,
    grid: {
      columns: [{
        title: { text: 'Task' },
        labels: { format: '{point.name}' }
      }, {
        title: { text: 'Assignee' },
        labels: { format: '{point.assignee}' }
      }, {
        title: { text: 'Progress' },
        labels: { format: '{point.completed.amount:.0%}' }
      }]
    }
  },
  
  tooltip: {
    pointFormat: '<b>{point.name}</b><br/>' +
                 'Start: {point.start:%e %b}<br/>' +
                 'End: {point.end:%e %b}<br/>' +
                 'Progress: {point.completed.amount:.0%}'
  },
  
  plotOptions: {
    gantt: {
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },
  
  series: [{
    name: 'Project',
    data: [{
      id: 'planning',
      name: 'Planning Phase',
      assignee: 'Project Manager'
    }, {
      id: 'req',
      name: 'Requirements',
      parent: 'planning',
      start: Date.UTC(2024, 0, 1),
      end: Date.UTC(2024, 0, 14),
      completed: 1,
      assignee: 'Business Analyst'
    }, {
      id: 'design',
      name: 'Design',
      parent: 'planning',
      start: Date.UTC(2024, 0, 15),
      end: Date.UTC(2024, 0, 28),
      completed: 0.8,
      assignee: 'Designer',
      dependency: 'req'
    }, {
      id: 'dev',
      name: 'Development Phase',
      assignee: 'Tech Lead'
    }, {
      id: 'backend',
      name: 'Backend Development',
      parent: 'dev',
      start: Date.UTC(2024, 1, 1),
      end: Date.UTC(2024, 2, 15),
      completed: 0.6,
      assignee: 'Backend Developer',
      dependency: 'design'
    }, {
      id: 'frontend',
      name: 'Frontend Development',
      parent: 'dev',
      start: Date.UTC(2024, 1, 1),
      end: Date.UTC(2024, 2, 15),
      completed: 0.5,
      assignee: 'Frontend Developer',
      dependency: 'design'
    }, {
      id: 'testing',
      name: 'Testing',
      start: Date.UTC(2024, 2, 16),
      end: Date.UTC(2024, 3, 15),
      completed: 0.2,
      assignee: 'QA Engineer',
      dependency: ['backend', 'frontend']
    }, {
      id: 'release',
      name: 'Product Release',
      start: Date.UTC(2024, 3, 16),
      milestone: true,
      dependency: 'testing',
      assignee: 'DevOps'
    }]
  }]
});

Styling and Theming

Customize the appearance of your Gantt chart:

plotOptions: {
  gantt: {
    borderColor: '#cccccc',
    borderWidth: 1,
    colorByPoint: false,
    dataLabels: {
      enabled: true,
      style: {
        fontSize: '12px',
        fontWeight: 'bold'
      }
    },
    // Completed portion styling
    completed: {
      fill: '#90ed7d',
      fillOpacity: 0.8
    }
  }
}

Performance Tips

Optimize Large Projects

Use boostThreshold for projects with hundreds of tasks
Collapse task groups by default
Consider pagination or filtering for very large projects
Minimize the number of visible columns in the tree grid

API Reference

Complete Highcharts Gantt API documentation

Live Demos

Interactive examples and demos

Task Dependencies

Learn about visualizing task relationships

Resource Management

Track and allocate project resources

Next Steps

Learn about Task Dependencies for complex project relationships
Explore Progress Tracking to monitor task completion
Try Drag and Drop for interactive project planning
Implement Resource Management to track team allocation

Getting Started

Core Concepts

Chart Types

Features

Advanced

Products

Overview

Installation

ES6 Module Import

Getting Started

Task Configuration

Key Features

Task Dependencies

Dependency Types

Custom Dependency Connectors

Pathfinding Algorithms

simpleConnect

straight

fastAvoid

Progress Tracking

Tree Grid and Grouping

Milestones

Resource Management

Advanced Features

Current Date Indicator

Custom Time Units

Drag and Drop

Complete Example

Styling and Theming

Performance Tips

Optimize Large Projects

API Reference

Live Demos

Task Dependencies

Resource Management

Next Steps

Getting Started

Core Concepts

Chart Types

Features

Advanced

Products

Documentation Index

​Overview

​Installation

​ES6 Module Import

​Getting Started

​Task Configuration

​Key Features

​Task Dependencies

Dependency Types

​Custom Dependency Connectors

​Pathfinding Algorithms

simpleConnect

straight

fastAvoid

​Progress Tracking

​Tree Grid and Grouping

​Milestones

​Resource Management

​Advanced Features

​Current Date Indicator

​Custom Time Units

​Drag and Drop

​Complete Example

​Styling and Theming

​Performance Tips

Optimize Large Projects

​Related Resources

API Reference

Live Demos

Task Dependencies

Resource Management

​Next Steps

Overview

Installation

ES6 Module Import

Getting Started

Task Configuration

Key Features

Task Dependencies

Custom Dependency Connectors

Pathfinding Algorithms

Progress Tracking

Tree Grid and Grouping

Milestones

Resource Management

Advanced Features

Current Date Indicator

Custom Time Units

Drag and Drop

Complete Example

Styling and Theming

Performance Tips

Related Resources

Next Steps