Skip to main content
The Timeline component provides an interactive timeline slider that allows users to navigate through different time periods or data states, with support for automatic playback and custom styling.

​
Purpose

Timeline enables temporal data exploration by switching between different chart configurations based on time or sequential data. From ~/workspace/source/src/component/timeline/TimelineModel.ts, it supports automatic playback, manual navigation, and flexible data representation.

​
Basic Usage

option = {
  timeline: {
    data: ['2020', '2021', '2022', '2023'],
    autoPlay: true,
    playInterval: 1000
  },
  options: [
    {
      title: {text: '2020 Data'},
      series: [{type: 'bar', data: [100, 200, 300]}]
    },
    {
      title: {text: '2021 Data'},
      series: [{type: 'bar', data: [150, 250, 350]}]
    },
    {
      title: {text: '2022 Data'},
      series: [{type: 'bar', data: [200, 300, 400]}]
    },
    {
      title: {text: '2023 Data'},
      series: [{type: 'bar', data: [250, 350, 450]}]
    }
  ]
}

​
Configuration Options

​
show
boolean
default:"true"
Whether to display the timeline component.
​
axisType
'category' | 'time' | 'value'
default:"'time'"
Type of the timeline axis:
  • 'category': Categorical timeline
  • 'time': Time-based timeline
  • 'value': Numeric timeline
​
currentIndex
number
default:"0"
Index of the currently selected timeline item.
timeline: {
  data: ['2020', '2021', '2022'],
  currentIndex: 1  // Start at '2021'
}
​
autoPlay
boolean
default:"false"
Whether to automatically play the timeline animation.
​
rewind
boolean
default:"false"
Whether to play in reverse when auto-playing.
​
loop
boolean
default:"true"
Whether to loop the timeline when reaching the end during auto-play.
​
playInterval
number
default:"2000"
Play interval in milliseconds between timeline items during auto-play.
​
realtime
boolean
default:"true"
Whether to update the chart in real-time as the timeline position changes.
​
controlPosition
'left' | 'right' | 'top' | 'bottom'
default:"'left'"
Position of the play control buttons relative to the timeline.
​
orient
'horizontal' | 'vertical'
default:"'horizontal'"
Orientation of the timeline component.
​
inverse
boolean
default:"false"
Whether to inverse the timeline direction.
​
replaceMerge
string | string[]
Specifies which option properties should be replaced instead of merged when switching timeline items.
timeline: {
  replaceMerge: ['series', 'xAxis'],
  data: ['2020', '2021']
}
​
data
array
Timeline data items. Can be values or objects with configuration.
data: [
  '2020',
  '2021',
  {value: '2022', tooltip: {formatter: 'Year: {b}'}},
  '2023'
]

​
Position

​
left
number | string
default:"'20%'"
Distance from the left side of the container.
​
top
number | string
Distance from the top of the container.
​
right
number | string
default:"'20%'"
Distance from the right side of the container.
​
bottom
number | string
default:"0"
Distance from the bottom of the container.
​
width
number | string
Width of the timeline component.
​
height
number | string
default:"40"
Height of the timeline component.
​
padding
number | number[]
Padding inside the component.

​
Item Style

​
itemStyle
object
Style of timeline items.
itemStyle: {
  color: '#304654',
  borderColor: '#aaa',
  borderWidth: 1
}
​
checkpointStyle
object
Style of the checkpoint (current position indicator).
​
lineStyle
object
Style of the timeline axis line.
lineStyle: {
  show: true,
  color: '#304654',
  width: 2,
  type: 'solid'
}
​
label
object
Configuration for timeline labels.

​
Control Style

​
controlStyle
object
Style configuration for play control buttons.

​
Emphasis

​
emphasis
object
Emphasis state styles for timeline items.
emphasis: {
  itemStyle: {
    color: '#c23531'
  },
  checkpointStyle: {
    color: '#316bf3',
    borderColor: '#fff',
    borderWidth: 2
  }
}
​
progress
object
Style for the progress section of the timeline.
progress: {
  lineStyle: {
    color: '#316bf3'
  },
  itemStyle: {
    color: '#316bf3'
  },
  label: {
    color: '#316bf3'
  }
}

​
Examples

​
Auto-playing Timeline

option = {
  timeline: {
    axisType: 'category',
    autoPlay: true,
    playInterval: 1500,
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    label: {
      formatter: function(s) {
        return '2024-' + s;
      }
    }
  },
  options: [
    {
      title: {text: 'January Sales'},
      series: [{type: 'bar', data: [100, 200, 300, 400, 500]}]
    },
    {
      title: {text: 'February Sales'},
      series: [{type: 'bar', data: [150, 230, 320, 450, 520]}]
    },
    // ... more options for other months
  ]
}

​
Styled Timeline with Custom Controls

option = {
  timeline: {
    axisType: 'category',
    orient: 'vertical',
    autoPlay: false,
    inverse: true,
    playInterval: 1000,
    left: null,
    right: 0,
    top: 20,
    bottom: 20,
    width: 55,
    height: null,
    symbol: 'none',
    checkpointStyle: {
      color: '#316bf3',
      borderColor: '#fff',
      borderWidth: 3,
      symbol: 'circle',
      symbolSize: 12
    },
    controlStyle: {
      showNextBtn: true,
      showPrevBtn: true,
      itemSize: 20,
      itemGap: 12
    },
    lineStyle: {
      color: '#ddd'
    },
    label: {
      color: '#999'
    },
    data: ['2015', '2016', '2017', '2018', '2019', '2020']
  },
  options: [
    // ... timeline options
  ]
}

​
Time-based Timeline

option = {
  timeline: {
    axisType: 'time',
    autoPlay: true,
    playInterval: 1000,
    data: [
      '2024-01-01',
      '2024-02-01',
      '2024-03-01',
      '2024-04-01'
    ],
    label: {
      formatter: function(value) {
        return new Date(value).toLocaleDateString();
      }
    }
  },
  options: [
    // ... options for each time point
  ]
}

​
Timeline with Progress Styling

option = {
  timeline: {
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
    autoPlay: true,
    loop: false,
    itemStyle: {
      color: '#ddd'
    },
    checkpointStyle: {
      symbol: 'circle',
      symbolSize: 14,
      color: '#316bf3',
      borderColor: '#fff',
      borderWidth: 3
    },
    progress: {
      lineStyle: {
        color: '#316bf3',
        width: 2
      },
      itemStyle: {
        color: '#316bf3'
      },
      label: {
        color: '#316bf3'
      }
    },
    emphasis: {
      itemStyle: {
        color: '#316bf3'
      }
    }
  },
  options: [
    // ... quarterly data
  ]
}

​
Implementation Details

From ~/workspace/source/src/component/timeline/TimelineModel.ts:173-344, the Timeline component:
  • Layout Mode: Box layout for flexible positioning
  • Data Types: Supports category, time, and value axis types
  • Playback Control: Methods for play/pause, next/previous navigation
  • Index Management: Handles looping and boundary conditions
  • State Persistence: Maintains current index across updates
  • Data Processing: Converts option data based on axis type
  • Event System: Dispatches timeline change events for chart updates

Build docs developers (and LLMs) love

Get started for freeTalk to us