Progress Bar

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

View PDF

The progress bar is a type of bar chart that displays the percentage with an icon and a progress bar. The icon can be customized.

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

Figure 1 Progress Bar

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 Progress bar card

Background
- Background color: Background color of the widget.
- 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, and GIF images are recommended. Each image cannot exceed 50 MB.
Special effect: Widget highlighted status. Displayed by default or on page load.
Padding: Distance between the chart in the widget and the four sides (top, bottom, left, and right) of the widget (see Figure 2). The default value is 0, indicating that the chart is stretched across the widget.
Title
- Title show: Whether to display the title.
- Title content: Content of the title, for example, completion rate.
- Title font: Font, size, and color of the title.

Configuration

In the configuration settings, you can set the widget and progress bar.

Figure 4 Progress bar configuration

Basic configuration
- Number show: Whether to display the number.
- Alignment: Display position of the number, which can be left, center, and right.
- Title font: Font, size, and color of the number.
- Prefix: Prefix of the number.
- Font: Font size of the prefix.
- Suffix: Suffix, for example, %.
- Font: Font size of the suffix.
- Target show: Whether to display the target data.
- Target title: Title of the target data, for example, the current target.
- Font: Font, size, and color of the target data title.
- Achieved show: Whether to display the completion data.
- Achieved title: Title of the completion data, for example, "Done".
- Font: Font, size, and color of the completion data title.
Bar settings
- Progress position: Style of the progress bar, for example, rounded rectangle and rectangle.
- Column chart width: Width of the progress bar.
- Progress color: Color of the current progress.
- Progress background color: Background color of the progress bar.
- Icon show: Whether to display the progress bar icon.
  - Image style: Custom icon. JPG, JPEG, PNG, and GIF images are recommended. Each image cannot exceed 50 MB.
  - Icon width: Width of the icon.
  - Icon height: Height of the icon.
  - Icon position: Position of the icon, for example, above or below the progress bar.

Data

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

Interaction

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

Parent topic: Charts

Previous topic: Progress Bar Chart

Next topic: Heat Map