Pie chart

Example

This donut chart displays data collected by a survey team.

Step 1: Add the component

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

2. In the Web application editor, click the component icon on the left.

3. Above the Component List, enter Pie Chart in the search box to find the component. Then, drag the component to the canvas.

   For more information about adding components, see Add a component.

   In the component list on the left, search for Pie Chart and drag it to the canvas. After adding the component, you can use the Style panel on the right to configure properties such as position, size, rotation angle, component name, component visibility, and opacity. The Data Display area at the bottom contains the Configure Data Source button.

Step 2: Configure a data source

1. In the web editor, select the component. In the Style pane on the right, click Configure data source.

2. On the Data source configuration page, select a data source type and complete the configuration.

   Available data source types include API, data table resource, static data, and application push.

3. Click OK.

   On the Data display tab, the Data source section on the left shows the name of the configured data source. The Dimension and Measure sections list the attribute fields automatically parsed from the data source.

   Note

   Data source attribute fields are matched based on the following 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 data display

On the Data Display tab, configure the data fields and visual style of the pie chart.

1. Drag a field from Dimension to the Slice box to categorize the data, and drag a field from Measure to the Angle box to set the data proportions.

   Note

   By default, the system assigns a unique color to each distinct value of the dimension field. You can modify these colors in the Color section on the Style tab. You cannot add or remove field values in the color settings.

2. Optional: In the Slice and Angle boxes, click the triangle icon next to a field to perform the following operations.

   Actions	Description
   Aggregation method	Options: Sum (default), Average, Maximum, Minimum, and Count. This feature is available only for measure fields. The configured aggregation method appears before the field name. After setting an aggregation method for a measure field, you can configure filter conditions to display specific data. Note This feature is available only when the component's data source type is Data Table Resource.
   Filter	Add a field to the Filter section to use it as a filter item. You can then configure conditions based on this field to filter the displayed data. A maximum of 10 filters is supported. Alternatively, from the Dimension or Measure section on the left, you can click the triangle icon next to a field to add it to the Filter section. Note This feature is available only when the component's data source is a data table resource. For more information, see Configure filters.
   Set display name	Edit the display name of the field.

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

   Parameter	Description
   Global style	Set the global font and inner radius ratio. Adjust the Inner Radius Ratio to create a donut chart. A ratio of 0 (the default) creates a pie chart.
   Title	Show or hide the title or legend. If visible, you can customize their appearance.
   Legend
   Label	Configure the label's style and what it displays, such as percentages, values, or dimension names.
   Background	Toggles the visibility of the item. If visible, you can configure its style.
   Border
   No data tip

4. Click Complete Configuration to return to the web application editor and view the configured component data.

5. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

1. In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

   This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

   For more information, see Interaction configuration.

2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.