Skip to main content

Timeline Chart

Introduction

The Timeline Chart is a modern timeline chart component specifically built for native mobile applications. It displays events, tasks, and milestones in an elegant chronological timeline with smooth animations and intuitive navigation.

Features

  • Multiple view modes (Month, Week, Day)
  • Light and Dark theme support
  • Native mobile optimized with touch gestures
  • Real-time current time indicator
  • Status badges and color coding
  • Event filtering by date ranges
  • Timeline visualization with connecting lines
  • Touch-friendly event selection
  • Customizable event colors and styling
  • Rich event details with tags and descriptions
  • Smooth view transitions and animations
  • Jump to specific dates functionality
  • High performance with optimized rendering
  • Custom status indicators
  • Event grouping by date

How to use

  1. Drop component on the view
  2. Pass in task data (make sure to check documentation dropdowns) or refer to editor setup for setup sample.

Element Fields

  • Data Source: The data source containing the timeline events.
  • Date: The field name for the event date in the data source.
  • Title: The field name for the event title in the data source.
  • Description: The field name for the event description in the data source.
  • Tags: The field name for event tags in the data source.
  • Status: The field name for event status in the data source.
  • Task Color: The field name for event colors in the data source.
  • Color Mode: Select between Light or Dark theme.

Exposed States

  • Selected Task: The currently selected task data.

Events

  • Task is Selected: This event fires when a task is selected.

Actions

  • Jump to: Navigates the timeline to a specific date.

Editor | Preview