> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/timeline-chart.md).

# Timeline Chart

## Purpose

A timeline chart makes it easier to conceptualize a process or a sequence of events. It can make it easier for you to understand the intricacies of a project or why something seems to take so long to accomplish.

## Variations

![](/files/-MkunJosLV7N1dwLZteO)

There are several variations of Timeline charts which are supported through the configuration of data and component properties.

* Basic Timeline Chart
* Distributed Timeline Chart
* Advanced (Multiple Ranges Timeline Chart)
* Multiple Series - Group Rows Timeline chart

## Working with Data

‌The data format for the basic timeline chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.  

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `ColTimeLine` is defined in the Power App. The **`items`** property of the timeline chart component is then bound to this collection.

```markup
ClearCollect(
    ColTimeLine,
    {
        name: "Planning",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

```

The above code snippet will generate the following timeline chart.

![](/files/-MkunkBGfan8koU0WHaw)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlTZ0ME-IDFVKO3pCAk)

The below code snippet will generate dynamic collection to be consumed by component.

```
Clear(CategoryCol);
ForAll(
    Distinct(
        TimeLines,
        Category
    ),
    Collect(
        CategoryCol,
        {
            ProjectCategory:ThisRecord.Result
        }
    )
);

Clear(ColTimeLine);
ForAll(
    CategoryCol,
    Collect(
        ColTimeLine,
        {
            name:ThisRecord.ProjectCategory,
            data:ForAll(
                Filter(TimeLines,Category=ProjectCategory),
                {
                    Value:{
                        label: ThisRecord.Phase,
                        start: ThisRecord.'Start Date',
                        end: ThisRecord.'End Date'
                    }
                }
            )
        }
    )
);
```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x]  All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components.md) 
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th>Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>ShowDistributed</td><td>Property to show the distribution of a categorical variable by displaying eas its own bar. Property to give each series a unique color.</td><td>Boolean</td><td>X</td></tr><tr><td>StackedType</td><td>Property to change sack type of a bar</td><td><p>None</p><p>Stacked </p><p></p></td><td>X</td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>Text</td><td>X</td></tr><tr><td>Show100HeightBar</td><td>Property to set 100% height of the bar</td><td>Boolean</td><td>X</td></tr><tr><td>ShowReversed</td><td>Property to represent the Y-Axis from the right side</td><td>Boolean</td><td>X</td></tr><tr><td>FillType</td><td>Property to choose fill type for bars.</td><td><p>Gradient</p><p>Image</p><p>Solid</p></td><td>X</td></tr><tr><td>BackgroundImage</td><td>Property to provide background image URL for bars</td><td>URL</td><td>X</td></tr></tbody></table>

## Examples

### Distributed Timeline Chart

![](/files/-Mkuno3JTel_T-OhAbgQ)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection. You can use the same collection used in the [section](/timeline-chart.md#working-with-data).
{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;`XAxisDataType` property is set to **Datetime**
* [x] `ShowDistributed` property is set to **true**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Advanced (Multiple Ranges Timeline Chart)

![](/files/-MkunuKE7nqe1VpfL5YT)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColTimeLineMultiple,
    {
        name: "Bob",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-05T00:00:00"
            },
            {
                label: "Test",
                start: "2021-01-01T00:00:00",
                end: "2021-01-10T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-20T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-01T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    },
    {
        name: "Pam",
        data: [
            {
                label: "Code",
                start: "2021-01-01T00:00:00",
                end: "2021-01-07T00:00:00"
            },
            {
                label: "Test",
                start: "2021-08-01T00:00:00",
                end: "2021-01-12T00:00:00"
            },
            {
                label: "Validation",
                start: "2021-01-15T00:00:00",
                end: "2021-01-21T00:00:00"
            },
            {
                label: "Deployment",
                start: "2021-02-03T00:00:00",
                end: "2021-02-05T00:00:00"
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Multiple Series - Group Rows Timeline chart

![](/files/-MkurBiPpqLJXv1XTADo)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    ColpresidentTL,
    {
        name: "George Washington",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1796-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1797-01-01T00:00:00",
                end: "1800-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1801-01-15T00:00:00",
                end: "1804-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Adams",
        data: [
            {
                label: "President",
                start: "1797-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1807-01-10T00:00:00"
            }
        ]
    },
    {
        name: "Thomas Jefferson",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1809-01-05T00:00:00"
            }
        ]
    },
    {
        name: "Aaron Burr",
        data: [
            {
                label: "President",
                start: "1801-01-01T00:00:00",
                end: "1804-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-10T00:00:00"
            }
        ]
    },
    {
        name: "George Clinton",
        data: [
            {
                label: "President",
                start: "1805-01-01T00:00:00",
                end: "1812-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1813-01-01T00:00:00",
                end: "1817-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1818-01-15T00:00:00",
                end: "1820-01-20T00:00:00"
            }
        ]
    },
    {
        name: "John Jay",
        data: [
            {
                label: "President",
                start: "1789-01-01T00:00:00",
                end: "1793-01-05T00:00:00"
            },
            {
                label: "Vice President",
                start: "1794-01-01T00:00:00",
                end: "1796-01-10T00:00:00"
            },
            {
                label: "Secretary of State",
                start: "1798-01-15T00:00:00",
                end: "1800-01-20T00:00:00"
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `XAxisDataType` property is set to **Datetime**
* [x] `StackedType` property is set to **Stacked**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}