Gantt Chart Examples

What is a Gantt Chart?

A Gantt chart is a visual timeline that shows tasks, their duration, and how they relate to each other. It's the go-to tool for project managers, teams, and anyone who needs to plan work over time.

Common uses: Project planning, event scheduling, product roadmaps, construction timelines, marketing campaigns, software development sprints, and resource allocation.

Using it in your project: Simply add data-rsl-gantt to a container with a table inside, or use the JavaScript API for dynamic data. No complex setup required.

Premium Features

The RSL Gantt Chart is a powerful, feature-rich component for project management and timeline visualization.

Drag & Drop

Move and resize tasks with intuitive drag interactions

Dependencies

Visual arrows show task relationships

Milestones

Mark key dates with diamond markers

Zoom Levels

Day, Week, Month, Quarter, Year views

Progress Tracking

Visual progress bars on each task

Export

Export to PNG, CSV, or JSON

Example 1: Basic Project Timeline

A simple project timeline created from an HTML table with data-rsl-gantt.

Task	Start	End	Progress
Website Redesign	2024-12-01	2024-12-31	50
Design Phase	2024-12-01	2024-12-10	100
Development	2024-12-11	2024-12-22	60
Testing	2024-12-23	2024-12-28	0
Launch	2024-12-31	2024-12-31	0

<div data-rsl-gantt data-gantt-zoom="week">
    <table>
        <tbody>
            <tr data-task-id="1" data-task-type="group">
                <td>Project Name</td>
                <td>2024-12-01</td>
                <td>2024-12-31</td>
                <td>50</td>
            </tr>
            <tr data-task-id="2" data-task-parent="1" data-task-color="blue">
                <td>Sub Task</td>
                <td>2024-12-01</td>
                <td>2024-12-10</td>
                <td>100</td>
            </tr>
            <tr data-task-id="3" data-task-type="milestone" data-task-depends="2">
                <td>Milestone</td>
                <td>2024-12-31</td>
                <td>2024-12-31</td>
                <td>0</td>
            </tr>
        </tbody>
    </table>
</div>

Example 2: JavaScript API

Create and control Gantt charts programmatically with the JavaScript API.

// Create a Gantt chart
const gantt = RSL.Gantt.create('#my-gantt', {
    zoom: 'week',
    editable: true,
    tasks: [
        { id: '1', name: 'Planning', start: '2024-12-01', end: '2024-12-05', progress: 100, color: 'blue' },
        { id: '2', name: 'Development', start: '2024-12-06', end: '2024-12-20', progress: 50, depends: ['1'], color: 'green' },
        { id: '3', name: 'Launch', start: '2024-12-21', type: 'milestone', depends: ['2'] }
    ],
    onTaskUpdate: function(task) {
        console.log('Task updated:', task);
    }
});

// API Methods
gantt.addTask({ id: '4', name: 'New Task', start: '2024-12-22', end: '2024-12-25' });
gantt.setZoom('month');
gantt.scrollToToday();
gantt.getTasks(); // Returns all tasks

Next Steps

RSL Gantt Chart