Bar chart

Step 1: Add the component

1. Create a mobile application. For more information, see Create a mobile application.

2. In the mobile application editor, click the Components icon on the far left.

3. (Optional) Add column components to set up the layout of your application page. For more information, see Horizontal and vertical columns.

4. In the component list on the left side of the canvas, enter Bar Chart in the search box. Then, drag the component to the canvas.

   For more information about adding components, see Add components.

Step 2: Configure a data source

1. In the right-side panel of the mobile application editor, go to the style tab and click Configure Data Source next to Data Display.

2. On the Data Source Configuration page, select a data source type and configure it.

   You can choose from the following types: API, static data, or application push.

3. Click OK.

   On the Data Display tab, the name of your configured data source appears under Data Source. The system automatically parses fields from your data source and lists them under dimension and measure.

   Note

   Data source attribute matching rules:

   • dimension: Boolean, string, and time fields.

   • measure: Numeric fields.

4. (Optional) Click Data Table in the upper-left corner to view all data from the configured data source.

Step 3: Configure the data display

On the Data Display tab, configure the bar chart's data and style.

1. Drag a field from the dimension section to the Horizontal axis box and one or more fields from the measure section to the Vertical axis box.

   Note

   You can change the default chart colors on the property or style tab in the right-side panel.

2. In the horizontal axis and vertical axis boxes, click the triangle icon next to a field to set its display name.

3. On the right side of the Data Display tab, click Style to configure the style of the component.

   Parameter	Description
   Global Style	Sets the global font for the chart.
   Legend	Shows or hides the legend. If you choose to show it, you can configure its style.
   X-axis	Shows or hides the tick marks on the X-axis or Y-axis. If you choose to show them, you can customize their style. Note The axis tick count starts from the tick mark where the minimum value is located. For example, if the minimum value is 0, the maximum value is 500, and the interval is 50, the tick count is 11.
   Y-axis
   Horizontal Gridline	Shows or hides this item. If you choose to show it, you can customize its display style.
   Background
   Border
   No Data Message

4. Click Finish Configuration to return to the mobile application editor and view the data in the configured component.

5. Adjust the position of the component on the page. For more information, see General Styles.

Step 4: Configure interactions

1. In the right-side panel, go to the interaction tab and click Add Interaction to set an event and an action.

   The click and double-click events are supported. For example, you can set a click event on the component to trigger the Refresh Component action, which refreshes the content of a specified component.

   For more information, see Interaction configuration.

2. Preview and debug the component's data and style. For more information, see Preview and debug.