--- title: "Internal Pie chart" slug: "pie-graph" updated: 2024-05-21T10:21:41Z published: 2024-05-21T10:21:41Z canonical: "help.symphonysummitai.com/pie-graph" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.symphonysummitai.com/llms.txt > Use this file to discover all available pages before exploring further. # Pie Graph **Pie Graph** widget can be used to present proportional data or relative data in a chart. Let's explore the following Use Case for configuring the Pie Graph widget!   | **Use Case** User persona: Administrator | **Solution** | | --- | --- | | Sandra wants a graphical widget where she can analyze the percentage of open Incidents by status for the Incident Management team. This should give her a view to determine the open incidents where her inputs are required. | Sam can select the **Pie Graph** widget and configure it as an **I****nternal** widget under the settings option. He can configure it to display the count of open incidents sliced to status, giving Sandra the view of new incidents versus incidents in progress versus incidents awaiting user information. | Refer to the GIF for more details about the Use Case! ![pie](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/pie.gif?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) ### Configure Pie Graph widget This section contains the list of steps using which Application Designer can add the widget in the Service Portal screen. 1. Navigate to **Add Service Portal** > **Widgets** > **Add Widget**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1680604576555.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Adding Widgets 2. Customize the Service Portal by dragging the widget from the widget list screen. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1680604794970.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Pie Graph 3. Click the icon for this field to view the Properties pop-up. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1675757905426.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Modify the properties You can view the following tabs on the **Settings** for this field: ### Properties The table below contains the list of fields and their descriptions that are available under the **Properties** section: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443185263.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Properties tab To know more about the fields available under the Properties section, see the Field Description below. Field Description | **Properties** | | --- | | Widget Type | Select **Graphical widget** from the drop-down list. | | Widget Header | Type a name to widget according to the Data to be configured in the widget title text box. Here widget is tilted as **Open Incidents by Status**.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443251138.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Widget Header | | Chart Type | Select the **Chart Type** as**![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1688538443886.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)** or ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1688538514331.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) | | Style | Select the style of the chart by selecting from the drop-down list.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443380654.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Style If Style is selected as Donut, then screenshot appears as shown below: ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716197224540.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Style - Donut See the screenshot below if Pie Graph is selected. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716197375101.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Style - Pie | | Legend | Select the **Legend** position on the **Pie Graph** from the drop-down list. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443441161.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Legend The Legend property is similar to the Legends in the Line Graph. For more information, refer to [Graphical widget](https://help.symphonysummitai.com/summit-platform/docs/line-graph-widget)'s legend position description. | | Slice | Select **Show** **Percent** or **Show** **Value** or **Show Label** to display values on the chart. Here **Show Label** is selected as display values for the chart. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716198130260.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Slice Show by label in a pie chart involves visually separating or highlighting specific segments of the chart based on their corresponding labels or categories. This method allows you to draw attention to particular data points or categories within the dataset. See the screenshot below. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716199772440.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Show label Showing by value involves dividing the pie chart into segments based on the actual numerical values of the data points. Each segment represents a specific value or category, and the size of the segment corresponds to the magnitude of that value relative to the total. The screenshot below displays the pie chart with slice by value. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716200194888.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Show Value Show percentage involves dividing the pie chart into segments based on the proportions or percentages of the total represented by each data point. Each segment represents a percentage of the whole, rather than an absolute value. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716200439962.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Show percentage | | Slice Threshold in Percentage | Select the **Slice Threshold** percentage from the drop-down list. Here **Slice Threshold** is selected as 0 from the drop-down list. It determines the minimum percentage of the total value a slice in a pie chart must represent to be visually separated or emphasized from the rest of the chart. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443615280.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Slice Threshold | ### Data Source Application Designer can configure internal or external tabular widgets by selecting source type under the **Data Source** tab. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1716203924227.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Data Source **Data Source** (**In****ternal**) This section contains the list of features using which the Application Designer can select **Source**, **Application**, **Module**, **Table**, **Slice**, and **Form**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702443991306.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Data Source tab The table below contains the list of fields and their descriptions that are available under the **Data Source** section: Field Description | **Data Source** | | --- | | Internal | Select the **Date Source** as **Internal** from the drop-down list. | | Application | Select the **Application** from which the data has to be fetched. The screen is shown with **Service Management** selected under the **Application** from the drop-down list.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702398082778.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Application | | Module | Select the **Module** from which the data has to be fetched. The **M****odule** can be selected from the drop-down list. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702398635290.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Module Here **Incident** is selected under the **Module** drop-down list. | | Table | Specify the **Table** from the drop-down list. Here **Manage Incidents** is selected under the **Table** drop-down. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702398696036.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Table | | Aggregate | Define the **Aggregate** function to summarize the data for **Pie Graph**. Here **Count Records** is selected from the drop-down list for **Aggregate** field. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702441577223.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Count Records | | Of | Select the Column name from the drop-down list. Here **Status** is selected under the column name **Of**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702444250855.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Column Name | | Slice | Select the name of the **Slice** from the drop-down list. Here **Slice** is selected as **Status** under the column name. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702444390600.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Slice | | Form | Define the **Form** using which it should open when you click on the data widget. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702444618826.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Manage Incidents The forms mapped for the table should be selected. Here **Manage Incidents** is specified under **Form**. This field will appear only after the **Application** is selected. | | Open Mode | Select the mode of opening the form from the drop-down list. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702444703803.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Open Mode | | **Condition** | | Add Filter Set | Set the filter for the field, operator and values. The screen below displays **Status** with **equal to** as **Operator** and **New** as **Value.** **![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702444896431.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)**Figure: Screenshot | #### **Data Source** (**External**) This section contains the list of features using which the Application Designer can select **Source**, **API**, **Form**, and **Condition**. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1690286270319.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Data Source (External) | **Data Source** | | --- | | **External** | Select the **Date Source** as **Ex****ternal**. | | API | Select the **API** from which the data has to be fetched. | | Aggregate | Select the type of aggregate from the drop-down list. | | Of | Select the column type from the drop-down list. | | Form | Select the form type from the drop-down list. | ### Appearance This section contains the list of features using which the Application Designer can select **Title**, **Color & Themes**, **Background,** and **Border**.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1711965576738.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Appearance The table below contains the list of fields and their descriptions that are available under the **Appearance** section: Field Description | Appearance | | --- | | **Widget Header** | | Text Type | Define the text type for the Pie Graph widget. | | Text Color | Select the text color for the Pie Graph widget. | | Text Size | Select the preferred text size. | | Text Style | Choose the style for the font. | | Text Alignment | Select the preferred alignment for the font. | | **Header Separator** | | Border | Select the border style from the drop-down list. | | Width | Choose the preferred width for the Header. | | Color | Select the header color for the Pie Graph widget. | | **Color & Themes** | | Configure Colors | Choose the color and theme for the illustration. Configuring Themes is similar to Themes in the Line Graph. For details about configuring Themes, refer to the [Graphical widget (Line Chart)](https://help.symphonysummitai.com/summit-platform/docs/line-graph-widget). | | **Background** | | --- | | Background Type | Select the preferred background type. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1676456850487.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Background | | **Border** | | --- | | Border | Select the border by selecting desired Border Type from the drop-down list. | | Dimension | | --- | | Dimension | Select the widget's height and width from the drop-down list. You can set the height in pixels (px) and the width in both percentages (%) and pixels (px). Using a percentage for width allows the widget to fill the container's width. ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1711620100476.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)Figure: Dimension | Click **Save** to save the configuration. The configured **Pie Graph** widget with and without date time field appears as shown below.![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Documentation/image-1702442849782.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) Figure: Open Incidents by Status ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Glossary/image-1711452902289.png?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D) ![](https://cdn.document360.io/62351b42-cfbd-43ad-8ce1-82b8f455337f/Images/Glossary/sam(2).jpg?sv=2026-02-06&spr=https&st=2026-10-27T04%3A26%3A55Z&se=2026-10-27T05%3A26%3A55Z&sr=c&sp=r&sig=jA4VRK9xj4TR014Je2V2bqIu62fRHoRolzOvWK8SOms%3D)