Timeline

Updated on 2025-03-24 GMT+08:00

View PDF

The timeline is a type of text widget. It displays a series of events in chronological order.

On the large screen design page, drag the timeline widget from All > Text to the blank area of the canvas, as shown in Figure 1.

Figure 1 Timeline widget

Figure 2 Margin style

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Timeline card

Background
- Background color: Background color of the widget card.
- Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
- Style: Image display style. The options are normal, center, stretch, and tiled.
- Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
Special effect: Widget highlighted status. Displayed by default or on page load.
Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 2) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.
Chart title
- Chart title: Whether to display the chart title.
- Title content: Content of the title.
- Title position: Title display position, which can be left, center, or right.
- Title font: Font, color, and size of the title.

Graphic

A graphic is a specific graphical expression element that visualizes data in a widget, for example, a slice in a pie chart, a bar in a bar chart, a line or a kink point in a line chart.

Figure 4 Timeline graphic

Timeline
- Timeline direction: Direction of the timeline. The horizontal and vertical directions are supported.
- Automatic rotation: Whether to display the automatic rotation effect.
- Interval: The interval.
- Stay duration: Duration of stay.
- Default line style: Default color of the line.
- Line selection style: Color of the selected line.
- Line thickness: Thickness of the line.
Line label
- Default label font: Default font, size, and color of labels.
- Selected label font: Font, size, and color of a selected label.
- Label rotate: Rotation angle of labels.
- Default description font: Default description font, color, and size of labels.
- Selected description font: Font, color, and size of the description when a label is selected.
- Description rotation: Rotation angle of the description text.
Line node
- Type: Type of a line node. The options are time, category, and numeric.
- Node shape: Shape of a node. The value can be circle or rhombus.
- Node default style: Color of the default node style.
- Node selected style: Color of a selected node.
- Node size: size of a node.

Data

In the data settings, you can set the data source of the timeline widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure the interaction between the timeline widget and other widgets or pages. For details, see Interaction Configuration.

Parent topic: Sting

Previous topic: Word Cloud

Next topic: General Table