# Gantt Chart

> Learn how to use the Gantt Chart Component in MockFlow Board to plan projects, visualize timelines, track tasks, and collaborate with your team in one whiteboard.

Source: https://mockflow.com/docs/boards/components/gantt-chart-in-ideaboard

Available in:
                    

              Basic
            

              WireframePro
            

              MockFlow Board
            

              Bundle Plan
            

              Enterprise
            

The Gantt Chart Component in MockFlow Board helps you visually plan and track tasks over time. It allows you to define tasks, assign timelines, and understand the sequence and overlap of activities - all directly within your whiteboard. This makes it ideal for project planning, roadmap creation, and timeline-based brainstorming.

Instead of managing timelines in separate tools, you can create and adjust your project schedule alongside related notes, diagrams, and ideas on the same board.

## **What is the Gantt Chart Component?**

A Gantt chart is a timeline-based planning tool that shows tasks as horizontal bars across a calendar. Each bar represents the duration of a task, helping you see when tasks start, how long they last, and how they relate to other tasks.

## **How to add Gantt Chart in MockFlow Board**

Inside MockFlow Board,  click on the Plus (+) icon, search for **Gantt Chart** from the components list, and drag and drop it onto the canvas.

![Adding Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/fe7266a5c226f8698f5181bd.gif)

**Editing the Gantt Chart: **Use the _Interact with Component_ option from the quick toolbar or just double-click on the component, to edit tasks inside the Gantt chart. 

Double-click or click on the edit icon to add details to individual line items including dates, description, priority and assignee.

You can also drag the bar directly to edit the timeline. 

There are weekly, daily and monthly view options available and there is also a search functionality to find tasks.

Other options detailed below in this order:

1. Generate with AI
2. Themes
3. Adding groups
4. Export Gantt chart
5. Customize font styles
6. Using focus mode

**Generate Gantt Charts with AI:**To quickly create a Gantt chart, use the **AI** option in the quick toolbar. Just enter a single prompt, and AI will generate a structured Gantt chart for you. You can then edit the AI-generated chart or even convert it into other components. To learn more about AI generation and conversions, we can check out the help article.

![Generating Gantt Chart with AI - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/03cd05e2b057da45450ec6ac.webp)

![Interacting with Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/0573f4de4171a9034d1bf67b.webp)

**Customize the Gantt Chart with Themes: **Switch the Gantt chart between light and dark themes using the theme options in the quick toolbar, making it easy to match different project styles or brand themes.

![Themes in Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/027227bbe4b07957d0a15a32.webp)

**Categorize Tasks Using Groups: **By using **Add Groups**, you can organize tasks into meaningful categories, such as phases, teams, or milestones, to keep the Gantt chart structured and easy to follow.

![Groups in Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/4db02d56acb8de84099e1cec.webp)

**Exporting the Gantt Chart:** You can use the Export option from the quick toolbar to export the Gantt chart as CSV or JSON format.

![Exporting the Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/371072c0b438e20827c9e4cf.webp)

**Adjusting the Font Settings: **You can customize the font style and size using the **Font Settings** in the quick toolbar to improve readability and match our presentation style.

![Font settings in Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/a888323052d67204ed84dfbe.webp)

**Use Focus Mode for Distraction-Free Planning: **With **Focus Mode** enabled from the quick toolbar, you can work only on the Gantt chart without any distractions, as all other components are hidden from the canvas in the focus mode.

![Focus mode in Gantt Chart - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/7476854e13d219b769c3f724.webp)

## Use Cases

1. **Product roadmaps:** Plan feature releases and development phases.
2. **Marketing campaigns:** Track campaign milestones such as planning, design, launch, and analysis.
3. **Sprint planning:** Visualize sprint timelines, deliverables, and deadlines.
4. **Project management:** Organize tasks across phases like research, design, development, and testing.