Timeline

RadzenTimeline component is a graphical representation used to display a chronological sequence of events or data points. It allows users to visualize and interact with time-based information, making it easier to grasp the sequence of events. The timeline consists of a line with markers or data points positioned along it, each corresponding to a specific moment or period in time.

Basic Usage link

Orientation and Position link

The Orientation sets the timeline's alignment to horizontal or vertical. Use LinePosition in combination with Reverse to specify the position of <LabelContent> and <ChildContent> content with respect to the line.

Align Items link

Set the AlignItems property to <RadzenTimeLine> to specify the alignment of Timeline items' content, namely <PointContent>, <LabelContent> and <ChildContent> content.

Styling link

Use CSS variables to adjust line width and color.

Point Size link

Set the PointSize property to <RadzenTimeLineItem> to specify the item's point size.

Point Style link

Set the PointStyle property to <RadzenTimeLineItem> to change the item's point style.

Point Variant link

Set the PointVariant property to <RadzenTimeLineItem> to change the item's point variant.

Point Shadow link

Set the PointShadow property to <RadzenTimeLineItem> to specify the size of the item's point shadow.

Point Content link

The <PointContent> can fit in text and imagery.

• Example
• Edit Source

A

Text

alarm_on

RadzenIcon

RadzenGravatar

All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Start Free See All Benefits

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT