The percentage pie chart widget allows you to customize the pie chart style, the percentage value, and other options as needed.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • Chart Options
    • Inner Radius: To change the length of the inner radius, enter a value or drag the slider. The value range of the inner radius is from 0 to 1.
    • Outer Radius: To change the length of the outer radius, enter a value or drag the slider. The value range of the outer radius is from 0 to 1.
    • Pie Background Color: To change the background color of the pie chart, see Color picker.

  • Gradient Options
    • Start Color: To change the start color of the segment, see Color picker.
    • End Color: To change the end color of the segment, see Color picker. The end color determines the gradient effect.
    • Animation Duration: To change the time for which a segment changes its color from the start point to the end point, enter a value, or click + or .

  • Percent Size
    • Text Style
      • Font Family: To set the font of the percentage value, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
      • Font Color: To change the font color of the percentage value, see Color picker.
      • Font Weight: To set the font weight of the percentage value, click the drop-down arrow and select the target font weight.
      • Size Percent: To change the display of the percentage value, enter a value or drag the slider. The value range is from 0 to 1. If the value is too small, the numerical value and the percent sign will overlap or will be displayed in two rows.

      • Number Font Size: To set the font size of the numerical value, enter a value, or click + or .
      • Percent Sign: You can set the percent sign that follows the numerical value when the real data value is displayed as the percentage value.
      • Percent Sign Font Size: To set the font size of the percent sign, enter a value, or click + or .
      • Percent Position: To set the position of the percent sign, click the drop-down arrow and select the target position.
        • Front
        • End
      • Percent Offset: To adjust the spacing between the percent sign and the numerical value, enter a value, or click + or .

Data

value: a decimal number, which indicates the percentage value of a segment in the pie chart. The value 1 indicates 100%.

Interaction

This widget is not connected to any events yet.