---
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

:core-static-kpistatetimeline-lg:{style="font-size: 100px"}

## Overview

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

## General

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

![timeline](images/timeline_general.png)

## Style

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

## Setup

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)

## Links

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)

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

## 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)