Use the Pie Chart control to demonstrate information in a circular graph illustrating numerical proportions.
Displaying the statistics is as easy as pie with a Pie Chart control. Here you can make each section of a different color, and display the information either above, below the chart or even on hover.
Pie Chart control can be one of the most eye-catching controls for data analytics, with its nice layout and versatile settings. You are able to enrich it with the tooltips, set the height and animation duration, select the best fitting colors, etc.
Add Pie Chart to the page
Firstly, find the Pie Chart control in the controls add panel. Then, drag and drop it into a section or container on your page.
Select data source
Select the target data list as the source content to create Pie Chart based on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Categories and Values
A Pie Chart is a type of graph that displays data in a circular graph. The pieces of the graph are proportional to the fraction of the whole in each category. In other words, each slice of the pie is relative to the size of that category in the group as a whole. The entire “pie” represents 100 percent of a whole, while the pie “slices” represent portions of the whole.
Open the Content > Chart block to select the fields as category, sub-category and value of this Pie Chart.
Category: select one of the field included in the selected data list as the category of this Pie Chart. For example, select industry as the category of a customer list.
Sub category: The Pie Chart support 2 tier of categories. The sub category is optional. If you wanna show 2 type of categories, you can select another field as your second category.
Value: Select the field to calculate value of this Pie Chart, and the method about how to calculate the result. For numeric fields, the calculation type can be count (count the number of records), sum (sum of the total value of records), Count distinct (tallies unique values in data), Avg, Max or Min.
Pro Tip
To generate the pie chart, after the category and value fields are set, please click "Submit" button from the top-right of the top bar.
Settings of Pie Chart
Chart Height: set the height of this Pie Chart control.
Label: Show/hide the label on the Pie Chart.
Line: Show/hide line between the pieces of the graph.
Title of Pie Chart
Display: turn on to show title of the Pie Chart.
Chart Title: type the text of the title, or set dynamic content as the title text.
Title Position: set the display position of the title as Before Chart or After Chart.
Text Align: Set the alignment of the title as Left, Center, Right, or Justify.
Legend of Pie Chart
Display: turn on to show Legend of the Pie Chart.
Position: set the display position of the legend around the Pie Chart.
Tooltip of Pie Chart
Enable: turn on to show Tooltip of the Pie Chart.
Number Suffix: set the suffix of the number on the Tooltip.
Styling the Pie Chart control
Title
Text Color: Set the color of the title.
Typography: Set the typography of the title.
Margin: Set the Margin of the title in PX or %.
Padding: Set the Padding of the title in PX or %.
Text Shadow: Adjust box shadow options.
Label
Font Family: Set font family of the label.
Size: Set font size of the label.
Weight: Set font weight of the label.
Style: Set font style of the label.
Text Color: Set the color of the label.
Legend
Font Family: Set font family of the legend.
Size: Set font size of the legend.
Weight: Set font weight of the legend.
Style: Set font style of the legend.
Line-Height: Set line-height of the legend.
Text Color: Set the color of the legend.
Tooltip
Background Color: Set the background color of the Tooltip container.
Padding: Set the Padding of the tooltip container in PX or %.
Text Shadow: Adjust box shadow options.
Title: Set the Title's style of the Tooltip.
Font Family: Set font family of the Tooltip's title.
Size: Set font size of the Tooltip's title.
Weight: Set font weight of the Tooltip's title.
Style: Set font style of the Tooltip's title.
Line-Height: Set line-height of the Tooltip's title.
Text Color: Set the color of the Tooltip's title.
Value: Set the Value's style of the Tooltip.
Font Family: Set font family of the Tooltip's value.
Size: Set font size of the Tooltip's value.
Weight: Set font weight of the Tooltip's value.
Style: Set font style of the Tooltip's value.
Line-Height: Set line-height of the Tooltip's value.
Text Color: Set the color of the Tooltip's value.
Advanced Settings
Set the Advanced options that are applicable to this control.