The pie chart with indicator widget allows you to customize the pie chart style, the goal fulfillment, 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.
  • Text Area
    • Font Family: To set the font of the top and bottom label text, 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 top and bottom label text, see Color picker.
    • Goal Text: You can customize the text of the bottom label.
    • Current Progress Text: You can customize the text of the top label.
    • Font Size: To change the font size of the top and bottom label text, enter a value or drag the slider. The value range is from 12 to 100.
    • Font Weight: To set the font weight of the top and bottom label text, click the drop-down arrow and select the target font weight.

  • Chart
    • Progress 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.
    • Progress Background Color: To change the color of the target circle, see Color picker.
      Note The target circle is under the progress circle.


    • 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 Color: To change the color of the inner circle, see Color picker.
    • Inner Line Color: To change the color of the inner line, see Color picker.
    • Inner Label Color: To change the color of the percentage value in the inner circle, see Color picker.
    • Font Size: To change the font size of the percentage value in the inner circle, enter a value or drag the slider. The value range is from 12 to 100.
    • Border Size: To set the weight of the inner and outer borders, enter a value, or click + or –.

    • Margin
      • Top: To set the distance between the pie chart and the top label, enter a value, or click + or –.
      • Bottom: To set the distance between the pie chart and the bottom label, enter a value, or click + or –.


  • 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)

Interaction

This widget is not connected to any events yet.