The percentage bar chart widget allows you to customize the 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.
  • Global Options
    • Font Family: To set the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • Bar Padding: To adjust spacing 1 (spacing between the percentage bar and the left border) and spacing 2 (spacing between the percentage bar and the right border), enter a value or drag the slider. The value range is from 0 to 100.
    • Spacing of Text and Bar: To adjust the spacing between the text and the percentage bar, enter a value or drag the slider. The value range is from –50 to 50.


  • Tip
    • Font Size: To change the font size of the percentage value, enter a value or drag the slider. The value range is from 10 to 100.
    • 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.
    • True Value: If you select this option, the data value corresponding to the percentage value is displayed. If you clear this option, the percentage value is displayed.
    • Show Border: If you select this option, the border of the prompt box is displayed. If you clear this option, the border of the prompt box is not displayed.
    • Decimal
      • Decimal Point: If you select this option, the numerical value of the percentage value is displayed as a decimal number. If you clear this option, the numerical value is displayed as a whole integer.
      • Decimal Num: 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 1 to 4.
        Note The Decimal Num option is displayed only when Decimal Point is selected.


  • Percentage Bar
    • Gradient Range: To set the gradient range of the percentage bar, click the drop-down arrow and select the target range.
      • Global gradient
      • Local gradient
    • Start Color: To change the start color of the gradient colors, see Color picker.
    • End Color: To change the end color of the gradient colors, see Color picker.
    • Density: To change the number of segments in the percentage bar, enter a value or drag the slider. The value range is from 1 to 50.
    • Border Hidden: If you select this option, the borders of the percentage bar are hidden. If you clear this option, the borders of the percentage bar are displayed.
  • Sum: To set the value to be displayed when the percentage value is 100%, enter a value, or click + or .
    Notice The percentage value = Value/Sum. The value is obtained from the Data pane.


Data

value: numerical value in the percentage bar. The percentage value = Value/Sum.

Interaction

This widget is not connected to any events yet.