Timeline

Timeline

A timeline is a visualization of events over time. Event types are shown as individual rows on the timeline. Each occurrence of an event is displayed on the associated row by a shape/icon and color.

The most common use case for a timeline is to show a timeline of events associated with a specific object.

Standard Timeline

Image of card title

Timeline

Image of standard timeline

  1. Horizontal Axis Labels: The horizontal axis labels display time.
  2. Vertical Axis Labels: The vertical axes labels represent the event type being displayed in that row. The label can optionally include the total number of event indicators in the specified timeline.
  3. Hover Indicator: When hovering over the timeline, a gray vertical line is displayed with a tooltip indicating the date and time of that point on the timeline.
  4. Events:
    • Interaction (optional): If supported, clicking on an event indicator will display details of the event, and right clicking on an event indicator will bring up a contextual menu with associated actions.
    • Event Indicators: Events can be visually represented as shapes or icons. A user can view information related to a specific event by hovering over it. To help the user see which point they are hovering, the dot expands. Additionally, a tooltip should appear with the associated values for that specific event.
    • Color: For recommendations on colors, see the color palette.
  5. Interactive Chart:
    • Click and drag the chart left or right to navigate backwards or forward in time.
    • Use the mouse wheel to zoom in and out of the time range.
    • Note: The view context in the navigation viewport automatically adjusts its size and position to match the data shown.
  6. Zoom Slider:
    • +: Incrementally zooms into the time range.
    • -: Incrementally zooms out of the time range.
    • Slider Control: Drag the slider control to zoom in and out of the time range.
  7. Navigation Viewport: The navigation viewport shows the available time range of the data to be viewed.
  8. View Context:
    • Drag it left / right to scroll through the data on the main chart.
    • Click and drag the left and right edges to increase / decrease the amount of data shown.
    • Click off of the view context in the viewport to show the full data set in the main chart.
    • Click and drag on the viewport to create a new view context.

Timeline Hover

Image of timeline hover

  1. Tooltip: Tooltips should include the event type, name of the object as well as the date and time the event occurred.
  • View Angular PatternFly Example
  • View PatternFly NG Example
  • View PatternFly React Example

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.