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

Step Bar

A step bar is a decorative widget that guides users through a sequence of steps to complete tasks.

On the large screen design page, choose All > Others and drag the step bar widget to the blank area of the canvas, as shown in Figure 1.

Figure 1 Step bar 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 Step bar 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.

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 an inflection point in a line chart.

Figure 4 Step bar graph
  • Step direction: Indicates the display orientation of the step bar, either horizontal or vertical.
  • Step icon size: The size of the step icon, in pixels.
  • Step icon background: The background color of the step icon.
  • Completed: The color indicating a completed step.
  • Process status: The color of a step that is currently in progress.
  • Pending status: The color of a step that is waiting to be completed.
  • Label font: Font, size, and color of the step label.
  • Description font: Font and size of the description text.
  • Title left margin: Distance between the step label and the left side of the icon.

Data

On the data settings, you can set the data source of the step bar widget. For details, see Data Access.

Interaction

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