# EuiTimebarComponent

**Type:** component



A component for displaying chronological events or milestones on a horizontal timeline.

The EuiTimebarComponent renders a horizontal timeline with customizable items, labels,
markers, and optional grouping for overlapping items. It supports responsive behavior,
current date indication, and multiple display options.



**Selector:** `eui-timebar`

## Inputs
- **dateFormat**: `"short" | "medium" | "long" | "full" | "shortDate" | "mediumDate" | "longDate" | "fullDate" | "shortTime" | "mediumTime" | "longTime" | "fullTime" | string` - Format for displaying dates in the timeline.
- **e2eAttr**: `string` - 
- **endLabel**: `string` - Label displayed at the end of the timeline.
- **isCurrentDateMarkerAlwaysInRange**: `boolean` - When true, keeps the current date marker visible even if the current date is outside the timeline range by placing it at the edge of the timeline.
- **isGroupOverlappingLabels**: `boolean` - Whether to group timeline items with overlapping labels to improve readability.
- **isShowCurrentDateMarker**: `boolean` - Whether to display a marker for the current date on the timeline.
- **isShowLegend**: `boolean` - Whether to show a legend with timeline item labels.
- **isShowLegendAsIndex**: `boolean` - Whether to display indices instead of colors in the legend.
- **items**: `EuiTimebarItem[]` - Collection of items to be displayed on the timeline.
- **markedDate**: `Date` - Date to be highlighted on the timeline. Separate from currentDateMarker, which shows today's date.
- **startLabel**: `string` - Label displayed at the beginning of the timeline.
