### File

`packages/components/eui-timebar/eui-timebar.component.ts`

### Description

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.

### Implements

`OnInit` `AfterContentInit` `AfterViewChecked` `OnChanges` `OnDestroy`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-timebar`
imports | `NgClass` `AsyncPipe` `DatePipe` `EUI_ICON` `EUI_BADGE`
templateUrl | `./eui-timebar.component.html`
styleUrl | `./eui-timebar.scss`

### Index

###### Properties

- container
- currentDate
- currentPerc
- extraTimelineLabelSpace
- isGroupOverlappingLabelsGenerated
- isMobile
- isShowLegendAsIndexGenerated
- isShowLegendGenerated
- isSomeStepsAreGrouped
- itemsUI
- markedPerc
- subscription
- timebarColumnClass

###### Methods

- onBreakpointChange
- trackByFn

###### Inputs

- dateFormat
- e2eAttr
- endLabel
- isCurrentDateMarkerAlwaysInRange
- isGroupOverlappingLabels
- isShowCurrentDateMarker
- isShowLegend
- isShowLegendAsIndex
- items
- markedDate
- startLabel

### Inputs

dateFormat
Type : `"short" | "medium" | "long" | "full" | "shortDate" | "mediumDate" | "longDate" | "fullDate" | "shortTime" | "mediumTime" | "longTime" | "fullTime" | string`
Default value : `'yyyy-MM-dd'`
Format for displaying dates in the timeline.

e2eAttr
Type : `string`
Default value : `'eui-timebar'`

endLabel
Type : `string`
Label displayed at the end of the timeline.

isCurrentDateMarkerAlwaysInRange
Type : `boolean`
Default value : `false`
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
Type : `boolean`
Default value : `false`
Whether to group timeline items with overlapping labels to improve readability.

isShowCurrentDateMarker
Type : `boolean`
Default value : `false`
Whether to display a marker for the current date on the timeline.

isShowLegend
Type : `boolean`
Default value : `false`
Whether to show a legend with timeline item labels.

isShowLegendAsIndex
Type : `boolean`
Default value : `true`
Whether to display indices instead of colors in the legend.

items
Type : `EuiTimebarItem[]`
Collection of items to be displayed on the timeline.

markedDate
Type : `Date`
Date to be highlighted on the timeline. Separate from currentDateMarker, which shows today's date.

startLabel
Type : `string`
Label displayed at the beginning of the timeline.

### Methods

onBreakpointChange
`onBreakpointChange(bkps: any)`

Parameters :

Name | Type | Optional
bkps | `any` | No

Returns : `void`

trackByFn
`trackByFn(index: number, item: EuiTimebarItemUI)`

Parameters :

Name | Type | Optional
index | `number` | No
item | `EuiTimebarItemUI` | No

Returns : `string`

### Properties

container
Type : `ElementRef<HTMLDivElement>`
Decorators : `@ViewChild('container')`

currentDate
Default value : `new Date()`

currentPerc
Type : `number`

extraTimelineLabelSpace
Type : `number`
Default value : `21`

isGroupOverlappingLabelsGenerated
Type : `boolean`

isMobile
Default value : `false`

isShowLegendAsIndexGenerated
Type : `boolean`

isShowLegendGenerated
Type : `boolean`

isSomeStepsAreGrouped
Default value : `false`

itemsUI
Type : `EuiTimebarItemUI[]`
Default value : `[]`

markedPerc
Type : `number`

subscription
Type : `Subscription`

timebarColumnClass
Calculation of it happens internally and will be removed in the future
Type : `string`
Default value : `''`
The class to be applied to the timebar column.

# results matching ""

# No results matching ""