---
title: "Using Gantt Charts on a Diagram Tile"
slug: "using-gantt-charts"
description: "This document shows users how to add and use a Gantt Chart to a Diagram Tile. The Gannt Chart can be added to a Diagram Tile and configured, after the user creates an Empty Diagram Tile. Gannt Charts are located under, Steps>Charts, in the Steps panel. "
updated: 2025-06-16T16:34:52Z
published: 2025-06-16T16:34:52Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Gantt Charts on a Diagram Tile

## Overview

Gantt Charts are a type of horizontal bar graph used in managing projects, keeping track of time spent completing parts of a project, and the progress on each part. These charts can be easily implemented and configured as Diagram Tiles in Decisions to show customized data from the project on a Page or Dashboard.

---

## Example

This example demonstrates how to create a Gantt Chart that can be viewed from a Page.

1. In the Designer Project, click CREATE REPORT on the **Global Action Bar** and **Diagram Tile**. Select **Empty Diagram Tile**, name the Diagram Tile (Gantt Diagram Tile), and click CREATE.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-02_14h14_54.png)
2. In the **Toolbox**panel, drag and drop the **Gantt** chart to the workspace under the CHARTS category. Then, expand the size.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h19_19(1).png)
3. Given that Gantt Data is a composite data type, under the INPUTS category, select **Unknown**and click **Build Data**. These elements allow the user to set the various parameters visible in the chart.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h22_56.png)
4. Click the whitespace around the Gantt Chart and select the Diagram Tile **Properties**tab. Under **Diagram Tile Inputs,** select SHOW EDITOR.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h24_52.png)
5. Create three **String [Text]** inputs (Week 1 Label, Week 2 Label, Week 3 Label) that will denote the chart's time frame. Then, create three **GanttChartData** type inputs (Chart Information - Day One, Chart Information- Day Two, Chart Information - Day Three) for each training day. Create two **Date Time** fields (Training Start Date, Training End Date) and an **Int32 [Number]**field (Training Length). Then, click **Save**and close the Inputs Dialog window.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h28_13.png)
6. Select the Gantt Chart. Under the INPUTS category, select **Chart Data and click Build Array next**. Then, select **Build Data** for **Item 0** field.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h29_32.png)
7. Add the inputs to represent each test and Build Data for each one. Then, **Constant**map data relating to each value of the Chart Data, beginning with Duration.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-16_12h33_40.png)
8. After mapping the values, input constant dates to represent the beginning and end values of the chart.
9. Click Save on the top action bar and close the Designer.
10. Navigate to a Page to display the Gantt Chart. Navigate to **Tiles > [SELECT TILES] > [Name of Designer Folder]**. Then, drag and drop the step.  
![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-02_17h15_40.png)

---

## Debug

The Tile will display the Gantt Chart with the newly configured static data values on the Page.

A Gantt Chart can be dynamically populated with values using an input Flow. 

![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-21_11h45_17.png)