JavaScript Gantt Chart

Interactive Timeline Management

Create dynamic project timelines with drag-and-drop functionality. ApexGantt enables you to easily adjust task durations, move deadlines, and resize project phases directly on the timeline. Real-time visual feedback helps you understand the impact of schedule changes instantly.

The interactive sidebar allows you to manage task hierarchies, set progress percentages, and organize complex project structures with parent-child relationships for comprehensive project oversight.

Multiple View Modes

Switch between Day, Week, Month, Quarter, and Year views to get the perfect perspective for your project timeline. Each view mode automatically adjusts the timeline granularity and task bar sizing for optimal visualization.

Whether you're planning daily sprints or long-term strategic initiatives, ApexGantt's flexible view modes ensure you can analyze your project at the right level of detail for effective decision-making.

Resizable Sidebar

Customize your workspace with a fully resizable task sidebar. Adjust the width to accommodate longer task names or show more timeline detail. The flexible layout adapts to your project management needs.

Rich Tooltips

Access comprehensive task information through customizable tooltips. Display start/end dates, duration, progress percentage, dependencies, and custom fields with fully templatable HTML content.

Extensive Customization

Tailor every aspect of your Gantt chart appearance. Customize colors, fonts, bar styles, row heights, and spacing. Create branded project timelines that match your organization's visual identity.

Gantt Exporting

Export your project timelines and Gantt charts as high-quality SVG files. Preserve all task details, dependencies, progress indicators, and annotations for documentation, reporting, or sharing with stakeholders and team members.

Simple Integration

Get started with ApexGantt in just a few lines of code

import ApexGantt from "apexgantt";

const tasks = [
  {
    id: 'task1',
    name: 'Project Planning',
    startTime: '01-01-2024',
    endTime: '01-15-2024',
    progress: 100
  },
  {
    id: 'task2',
    name: 'Development Phase',
    startTime: '01-16-2024',
    endTime: '03-01-2024',
    progress: 65,
    parentId: 'task1'
  }
];

const gantt = new ApexGantt(
  document.getElementById('gantt-container'), 
  tasks
);
gantt.render();

Ready to streamline your project management?

Start building powerful Gantt charts with ApexGantt today.

APEXGANTT DEMOS

Reset Password