Liquid Fill Gauge
Tutorial

This section provides the general settings:
Value - Sets the value of the number to be displayed.
Minimum Value - Sets the minimum value of the chart.
Maximum Value - Sets the maximum value of the chart.
Width - Sets the width of the chart
Height - Sets the height of the chart

The design of the circle can be customised in this section.
Circle Thickness - Set the thickness of the outer circle here.
Circle Fill Gap - Set the thickness of the gap between the circle and the wave.
Circle Color - Set the circle color here.

Specific information about the wave is entered here.
Wave Height - the wave height as a percentage of the radius of the wave circle.
Wave Count - the number of full waves per width of the wave circle.
Wave Rise Time - the amount of time in milliseconds for the wave to rise from 0 to it's final height.
Wave Animate Time - the amount of time in milliseconds for a full wave to enter the wave circle.
Wave Rise - determines if the wave should rise from 0 to it's full height, or start at its full height.
Wave Height Scaling - sets the wave size scaling at low and high fill percentages. if set, wave height reaches its maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near its minimum or maximum fill.
Animate Wave - controls if the wave scrolls or is static.
Wave Color - the color of the fill wave.
Wave Offset - the amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.

You can format the text inside the circle with these settings:
Vert. Text Pos. - the height at which to display the percentage text within the wave circle. 0 = bottom, 10 = top.
Text Size - the relative height of the text to display in the wave circle.
Count Up - if set, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed.
Display Percent - if set, a % symbol is displayed after the value.
Text Color - the color of the value text when the wave does not overlap it.
Wave Text Color - the color of the value text when the wave overlaps it.

We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy. Do you accept cookies?