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.
These demos showcase chronological event visualization with horizontal/vertical orientation options, configurable line position and content placement using LinePosition and Reverse, content alignment with AlignItems, CSS variable styling for line width and color, customizable point sizes/styles/variants/shadows, and rich point content with text and imagery.
Basic Usage link
NOV 2022
JAN 2021
JUN 2018
APR 2017
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.
NOV 2022
JAN 2021
JUN 2018
APR 2017
Align Items link
Set the AlignItems property to <RadzenTimeLine> to specify the alignment of Timeline items' content, namely <PointContent>, <LabelContent> and <ChildContent> content.
Persian soldiers baked flatbreads with cheese and dates
An early reference to a pizza-like food
The word pizza was first documented
A galette flatbread was referred to as a pizza in Naples
Alezandre Dumans described the diversity of pizza toppings
Styling link
Use CSS variables to adjust line width and color.
Step 1
Register Your Account
Step 2
Verify Your Identity
Step 3
Complete Self-Certification
Step 4
Complete Your Profile
Step 1
Register Your Account
Step 2
Verify Your Identity
Step 3
Complete Self-Certification
Step 4
Complete Your Profile
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.
Filled
Flat
Outlined
Text
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.
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT