The widget of percentage pie chart - 11.11 Global Shopping Festival allows you to customize the pie chart style, the proportion of members, and other options as needed.

Style

  • Chart Options
    • Outer Radius: To change the length of the outer radius, enter a value or drag the slider. The value range is from 0 to 1.
    • Inner Radius: To change the length of the inner radius, enter a value or drag the slider. The value range is from 0 to 1.
    • Circle Color: To change the color of the outer circle, see Color picker.
    • Circle Thickness: To change the width of the outer circle, enter a value, or click + or –.
  • Gradient Options
    • Animation Duration: To change the animation duration, enter a value, or click + or –.
    • Gradient Range: To change the gradient range, click the drop-down arrow and select the target range.
      • Full circle
      • Arc
    • Gradient Colors: To change one of the gradient colors, see Color picker.
  • Icon
    • File: To change the icon image in the center of the pie chart, enter the URL of the image.
    • Width: To change the width of the icon image, enter a value, or click + or –.
    • Height: To change the height of the icon image, enter a value, or click + or –.
    • Top Offset: To change the distance between the icon image and the top border of the pie chart, enter a value, or click + or –.
    • Left Offset: To change the distance between the icon image and the left border of the pie chart, enter a value, or click + or –.
  • Title
    • Text: You can add a title for the pie chart.
    • Text Style
      • Font Family: To set the font of the title text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
      • Font Size: To change the font size of the title text, enter a value, or click + or –.
      • Color: To change the font color of the title text, see Color picker.
      • Font Weight: To set the font weight of the title text, click the drop-down arrow and select the target font weight.
      • Top Offset: To change the distance between the title text and the top border of the pie chart, enter a value, or click + or –.
      • Left Offset: To change the distance between the title text and the left border of the pie chart, enter a value, or click + or –.
  • Percentage Display
    • Size: To change the plot of the icon image, the title text, and the percentage value in the pie chart, enter a value or drag the slider. The value range is from 0 to 1.
    • Number Font Size: To change the font size of the numerical value, enter a value, or click + or –.
    • Percent Sign Font Size: To change the font size of the percent sign, enter a value, or click + or –.
    • Top Offset: To change the distance between the percentage value and the top border of the pie chart, enter a value, or click + or –.
    • Decimal Places: To change the number of digits to the right of the decimal point, enter a value or drag the slider. The value range is from 0 to 2.
    • 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.

Data

  • value: actual data value that corresponds to the percentage value The value of this field is in decimal form where 1 is equal to 100%.

Interaction

This widget is not connected to any events yet.