Skip to main content

Gantt Chart

Gantt charts help you visualize project schedules and dependencies between tasks.

High-Level Overview​

To render a Gantt chart, you need to provide the following props to the Chart component:

  • chartType: Set this to "Gantt" to specify the chart type.
  • data: Provide the chart data in a tabular format. The first row defines the columns, and each subsequent row represents a task in the Gantt chart.

Basic Usage​

import { Chart } from "react-google-charts";

<Chart
  chartType="Gantt"
  data={data} // Example input data below
/>;

Example Input Data​

// First row defines the columns
const columns = [
  { type: "string", label: "Task ID" },
  { type: "string", label: "Task Name" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
  { type: "number", label: "Duration" },
  { type: "number", label: "Percent Complete" },
  { type: "string", label: "Dependencies" },
];

// Each subsequent row represents a task
const rows = [
  [
    "Research",
    "Find sources",
    new Date(2015, 0, 1),
    new Date(2015, 0, 5),
    null,
    100,
    null,
  ],
  [
    "Write",
    "Write paper",
    null,
    new Date(2015, 0, 9),
    daysToMilliseconds(3),
    25,
    "Research,Outline",
  ],
];

const data = [columns, ...rows];

Examples​

Below are interactive examples of Gantt charts rendered using react-google-charts. Each example demonstrates different features and customization options. You can interact with the charts directly in your browser.

Simple Example​

This is a basic Gantt chart illustrating simple task scheduling.

Computed Start End From Duration​

This example demonstrates how to compute the start and end dates from the duration of tasks.

Critical Path​

This example highlights the critical path in your project schedule.

Grouping Resources​

Learn how to group resources in your Gantt chart.

No Dependencies​

An example of a Gantt chart without task dependencies.

Styling Arrows​

Customize the arrows that represent task dependencies.

Styling Tracks​

Learn how to style the task bars (tracks) in your Gantt chart.

Read More​