Curved Bar

The Curved Bar (GraphArchBar) layer renders circular progress rings or dial gauges.

1. UI Settings and Descriptions

When editing a Curved Bar layer, the following options are available in the editor panel:

FRONT COLOR (FrontColor): The primary color of the filled progress ring.
TRACK COLOR (BackColor): The color of the empty background track.
GRADIENT COLOR (GradientColor): The color where the fill transition ends (if Use gradient is active).
FRONT ALPHA: Opacity of the progress fill (from 0 to 255).
BACK ALPHA: Opacity of the background track (from 0 to 255).
Use gradient (useGradient): Enables color transition along the arc.
DIAMETER: The outer diameter of the circular ring (in pixels).
THICKNESS (archWidth): The width of the ring arc itself.
START % (startPercentage): The starting sweep offset on a 360-degree circle (e.g., 25 starts the arc at the 90-degree position).
TOTAL ANGLE: The total angle span of the progress arc in degrees. For instance, 360 forms a full circle, whereas 270 or 180 forms dial gauges.
Round: Rounds the endpoints of the progress arc for a smoother appearance.
Ring Border: Draws a thin hairline circular frame around the bar.
Revert: Reverses the fill calculation direction.
Subsection: Divides the circular arc into segmented blocks.
- BLOCK ANGLE / SPACING (blockAngleSpacing): The angle width of each block and the angle gap between blocks (in degrees, e.g., 5, 2).

To construct a modern dashboard dial gauge:

Set DIAMETER to 360.
Set THICKNESS to 12.
Set TOTAL ANGLE to 270 and START % to 25 (creates a bottom-centered gap).
Set Round to True to make the ends circular.
Enable Use gradient with a vibrant color transition (e.g., #00F2FE to #4FACFE).
Set TRACK COLOR to #1A2035 and BACK ALPHA to 80 to keep the background track visible but subtle.