You can add one or more liquid charts to a project to display a percentage value of data in different styles.

Style

  • Outline Line
    • Shape: To set the shape of the outline line, click the drop-down arrow and select the target shape.
      • Circle
      • Square
      • Rounded square
    • Radius: To change the default radius of the liquid chart, enter a value or drag the slider. The value range is from 0 to 1.
    • Border Color: To change the border color of the liquid chart, see Color picker.
    • Border Width: To change the border width, enter a value, or click + or –.
    • Border Distance: To change the border distance, enter a value, or click + or –.
  • Text Style
    • Text
      • Color: To change the text color when the text is not covered by the liquid, see Color picker.
      • Inside Color: To change the text color when the text is covered by the liquid, see Color picker.
      • Font Size: To change the font size of the text, enter a value or drag the slider. The value range is from 10 to 100.
      • Width: To set the font weight of the text, click the drop-down arrow and select the target font weight.
      • Height location: Manually enter a numeric value or drag the slider to change the height of the text, the range of values is 0 to 1.
      • Percentage display: Click the drop-down arrow to select the text percentage display style.
        • Integer
        • A decimal number
        • Two decimal places.
  • wave
    • Number of peaks: Manually enter a numeric value or drag the slider to change the number of peaks in a range of 1 to 10.
    • Amplitude: Manually enter a numeric value or drag the slider to change the wave amplitude, from 0 to 1.
    • Phase: Manually enter a numeric value or drag the slider to change the wave phase, with a range of 0 to 360.
    • Cycle: Manually enter a numeric value or drag the slider to change the wave period, covering a range of 0.5 to 60, units are seconds.
    • Transparency: Manually enter a numeric value or drag the slider to change the transparency of the wave, from 0 to 1.
    • Animation: Click Eye button Displays animation features.
      • Direction: Click the drop-down arrow to select a style for the direction.
        • Left to right.
        • Right to left.
      • Change Effect: Click the drop-down arrow to select a change effect style.
        • constant speed
        • Acceleration
        • slow down
  • Scatter Type: Click the plus (+) sign or the trash can icon to add or delete a type.
    • Color: To change the text color when the text is not covered by the liquid, see Color picker.

Data

  • Value: Corresponds to the data content of the percentage icon in the basic water level diagram.

Interaction

This widget is not connected to any events yet.