---
tags:
- UI Page widgets
alias: user-guide-uipage-widgets-timeline
widgetname: Timeline
description: "This documentation explains how to create and customize a timeline widget for visualizing event sequences"
---

# Timeline

![timelineIcon][timelineIcon]

## Overview

The Timeline widget provides a mechanism to visualize a sequence of events over a specified period of time.

## General Steps

{% include-markdown 'includes/pages/ui_widgets_general_steps.md' %}

![timeline](images/timeline_general.png)

## Widget Customization

1. Optionally, in the **Style** tab, you can define a Border Width and Color.

    ![timeline](images/timeline_style.png)

2. In the **Setup** tab, the visual properties and the field names of the widget are configured, namely:

      - **Title** - The title of the timeline chart.
      - **Sub-Title** - The subtitle of the timeline chart.
      - **Use Auto-Generated Colors** - Specifies whether the colors for the range should be auto-generated. This option is set to `false` by default.
      - **Category Field** - The path to the category field that will appear in the tooltip for each range.
      - **Color Field** - The path to the field that defines the color of each range.
      - **Date Time Start Path** - The path to the start date and time field.
      - **Date Time End Path** - The path to the end date and time field.

    ![Screenshot showing the widget customization settings, including the "Date Time End Path" field.](images/timeline_setup_wizard.png)

3. Optionally, define the **Links** between this widget and other elements of the UI Page.

    ![Screenshot showing a UI page with options for customizing widget links to other elements on the page.](images/timeline_links_wizard.png)

4. By saving and closing the settings, the widget will be changed accordingly.

[timelineIcon]: images/timeline_icon.png

## Using the Fill Settings Feature

{% include-markdown 'includes/pages/fill_settings_ui_pages_widgets.md' %}

![Screenshot showing a timeline with fill settings options.](images/timeline_fill_settings.png)