Pie Chart
Pie Chart is also known as a pie graph. It uses the area of sectors, i.e., the degree of the central angle, to represent the count or percentage of variables. Pie charts are mainly used to show the internal composition of data with few groups or discrete quantitative data, and the sum of percentages of all parts must be 100%.
Pie charts are primarily used for nominal or categorical data, making it easy for users to understand the relationship between parts and the whole of a variable. By looking at the size of each sector in the circle, users can judge the proportion of each part in the whole. When a variable has multiple levels, bar charts or stacked filled bar charts can provide better visualization for the data.
Advantages: Due to its special graphical representation, pie charts display data more intuitively, making it easier to show proportion relationships.
Disadvantages: Pie charts are not suitable for displaying data with too many categories, negative values, or zero values. When the proportions of data are very close, it is difficult for the human eye to distinguish, so it is recommended to use donut charts or 3D pie charts in such cases.
Settings
Data Settings
| Setting Item | Description |
|---|---|
| Data Source | Select the data source for the pie chart |
| Name Field | Select the field returned by the data source, which is used to display the name of the pie chart sector labels, usually displayed in combination with the Tooltip Display menu. |
| Value Field | Select the field returned by the data source, the value of this field is used to represent the size of the pie chart sectors |
Chart Settings
| Setting Item | Description |
|---|---|
| Color Allocation Type | Configure the color effect of sectors in the pie chart, options: Allocate colors from the palette by chart、Allocate colors from the palette by data item.When multiple charts are aggregated, you can choose to allocate by chart; for a single chart, you can choose to allocate by data item. The specific color values can be adjusted in the palette of the Style menu. |
| Clockwise Arrangement | Configure whether to enable clockwise data arrangement order |
| Rose Chart Style | Configure whether to enable the rose chart style and effect. Options: Empty、Sector central angle displays data percentage、All sector central angles are the same |
| Prevent Label Overlap | Configure whether to enable adaptive layout to prevent label overlap. |
| Inner Radius | Set the inner circle radius value of the pie chart |
| Outer Radius | Set the outer circle radius value of the pie chart |
| Center Point X | Set the horizontal position of the pie chart's center point |
| Center Point Y | Set the vertical position of the pie chart's center point |
| Layer Order | Set the display priority level of this pie chart |
| Left | Set the distance from the left side of the card to the pie chart |
| Right | Set the distance from the right side of the card to the pie chart |
| Top | Set the distance from the top of the card to the pie chart |
| Bottom | Set the distance from the bottom of the card to the pie chart |
| Width | Set the width value of the pie chart, adaptive to default width if not filled |
| Height | Set the height value of the pie chart, adaptive to default height if not filled |
| Display Label Lines | Configure whether to display label guide lines |
| Display Above Graphics | Configure whether labels are displayed above the corresponding graphics |
| Smooth Line Segments | Configure whether label guide lines have a smooth effect |
Label Settings
| Setting Item | Description |
|---|---|
| Display Labels | Turn on or off the display of labels on the pie chart |
| Display Content Expression | You can customize the expression syntax to achieve complex content display scenarios. The display priority is lower than [Display Content] |
| Display Content | You can edit the label display content, which does not support complex expression syntax except for prompt content. The display priority is higher than [Display Content Expression] |
| Position | You can choose the display position of labels on the pie chart |
| Distance from Graphics | Set the distance of labels from the sectors in the pie chart |
| Label Rotation | Set the rotation angle of labels |
| Text Offset X | Set the distance of labels from the X-axis |
| Text Offset Y | Set the distance of labels from the Y-axis |
| Color | Set the color value of label text |
| Background Color | Set the background color of label text, which needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect |
| Text Style | Set the label text to italic or normal mode |
| Font Weight | Set the label font weight, options: Default、Bold、Very Bold、Light |
| Font | Set the label font style, options: sans-serif、serif、monospace、Arial、Courier NEW |
| Font Size | Set the label font size, which should not be less than 12 and not exceed 100 |
| Horizontal Alignment | Set the horizontal alignment of label text, including four ways: Auto, Left, Center, Right |
| Vertical Alignment | Set the vertical alignment of label text, including four ways: Auto, Top, Center, Bottom |
| Line Height | Set the line height of label text, which takes effect when Handle Width Exceed selects the line break option |
| Padding | Set the distance length of label text within the background frame |
| Width | Set the maximum display width of label text, generally need to be used with Handle Width Exceed for line break and other configurations |
| Height | Set the display height of label text, only affects the text background height, does not affect the text itself |
| Handle Width Exceed | The processing method when the label exceeds the maximum width, including two types: line break and truncation with ellipsis. If set to None, the maximum width will not take effect |
| Stroke Width | Set the stroke width of the label background, which takes effect after setting the stroke color |
| Stroke Color | Set the stroke color value of the label background |
| Stroke Radius | Set the stroke corner radius of the label background |
| Shadow Color | Set the shadow color of the label background, which takes effect after setting the label background color and shadow size |
| Shadow Size | Set the shadow size of the label background |
| Shadow Horizontal Offset | Set the horizontal offset distance of the label background shadow |
| Shadow Vertical Offset | Set the vertical offset distance of the label background shadow |
Sector Style
| Setting Item | Description |
|---|---|
| Color | Set the color effect of the sectors |
| Border Color | Set the color effect of the sector area border |
| Stroke Type | Configure the stroke type of the sector area. Options: Solid Line、Dashed Line、Dotted Line |
| Stroke Width | Set the stroke width of the sector area |
| Stroke Radius | Set the stroke corner radius of the sector area |
| Shadow Color | Set the shadow color of the sector area |
| Shadow | Set the shadow size of the sector area |
| Shadow Horizontal Offset | Set the horizontal position of the sector area shadow |
| Shadow Vertical Offset | Set the vertical position of the sector area shadow |
| Opacity | Set the opacity of the sectors, with a value between 0 and 1 |
Label Layout
| Setting Item | Description |
|---|---|
| Hide Overlapping Labels | After enabling, labels that overlap together will be hidden |
| Overlapping Offset Direction | When labels overlap together, you can choose the direction of label displacement, which can be horizontal or vertical displacement |
Highlight Settings
| Setting Item | Description |
|---|---|
| Disable Highlight | After disabling highlight, the labels will no longer be highlighted when the mouse moves to the label position |
| Behavior on Highlight | Set the interactive style of highlight display |
| Fade Range | Set the selection range of interactive interface fade when highlighting, providing three ways: fade coordinate system, fade chart, or global fade |
Events
| Setting Item | Description |
|---|---|
| Not Clickable | After enabling, all label data in the chart cannot be clicked; after disabling, you can set the corresponding data click interaction event |
| Call Automation on Click | You can implement related data label click interaction events by selecting the corresponding automation, such as opening the corresponding data form details or opening other web links after clicking |
| Call Automation on Double Click | The function is the same as click call, but the interaction is triggered by double click instead of single click. Click and double click events can be set simultaneously |
Other Settings
| Setting Item | Description |
|---|---|
| Color Palette | If you need to customize the pie chart area colors, you can find the color palette in the Style menu to adjust the chart color values |
| Hover Tooltip | If you need to display the value of each sector, you can set to display hover tooltip in the Hover Tooltip menu, and select data item graphics trigger |