The pie chart with goal widget allows you to customize the pie chart style, the percentage of an indicator, 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.
  • Font Family: To set the font of the label text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
  • Value
    • Font Size: To set the font size of the percentage value, enter a value, or click + or .
    • 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.
    • Number of Decimal Places: To change the number of digits to the right of the decimal point, enter a value, or click + or .
    • Real Value: If you select this option, the actual data value is displayed. If you clear this option, the percentage value is displayed.

  • Sector
    • Title: You can add a title for the pie chart.

    • Color
      • Solid Fill
      • Gradient Fill: You can select two colors as the gradient colors. To change the gradient angle, enter a value or drag the slider. The value range is from 0 to 360.
    • Background Color: To change the background color of the circle not covered by the indicator segment, see Color picker.

    • Excess Color: To change the color of the cross-boundary circle, see Color picker.
      Note A cross-boundary circle appears when the actual value exceeds the target value.


    • Inner Radius: To change the inner radius length (distance between the indicator segment and the center of the pie chart), enter a value or drag the slider. The value range is from 0 to 1. If the value is too small, the inner circle will be covered.

  • Inner Circle
    • Color: To change the line color of the inner circle, see Color picker.
    • Inner Radius: To change the radius length of the inner circle, enter a value or drag the slider. The value range is from 0 to 1.
    • Outer Radius: To change the radius length of the outer circle, enter a value or drag the slider. The value range is from 0 to 1.


  • Circles
    • Concentric Lines: To display the concentric lines, click the Eye icon.
      • Color: To change the color of the concentric lines, see Color picker.

  • Angle Axis
    • Angle Offset: You can customize the offset angle of the indicator segment as needed.

  • Legend: To display the legend items, click the Eye icon.
    • Text Style
      • Font Size: To set the font size of the segment title, enter a value, or click + or .
      • Font Color: To change the font color of the segment title, see Color picker.
      • Font Weight: To set the font weight of the segment title, click the drop-down arrow and select the target font weight.
    • Layout/Margin
      • Horizontal Interval: To set the horizontal distance between the segment title and the pie chart borders, enter a value, or click + or .
      • Vertical Interval: To set the vertical distance between the segment title and the pie chart borders, enter a value, or click + or .
      • Position: To set the position of the segment title, click the drop-down arrow and select the target position.
        • Top center
        • Top left
        • Top right
        • Bottom center
        • Bottom left
        • Bottom right


  • Animation: To display the animation option, click the Eye icon.
    • Original Duration: To change the duration to which the widget renders the animation for the first time, enter a value, or click + or . The unit is milliseconds.
    • Easing: To set animation easing, click the drop-down arrow and select the target effect.
    • Duration for Data Update: To change the animation duration when data changes, enter a value, or click + or . The unit is milliseconds.
    • Update from Latest Status: If you select this option, the animation begins from the segment where the data has changed. If you clear this option, the animation begins from the starting point.


Data

  • aims: target value
  • actual: progress value (actual data value), which is displayed as the percentage value of the segment

Interaction

This widget is not connected to any events yet.