Arc

The Arc component displays 2 angular zones.

The foreground one which indicates the current knob value, from the min to the knob value.

The background one is from the knob value to max.

Live Editor

<Knob size={100} angleOffset={220} angleRange={280} min={0} max={100}>
    <Arc arcWidth={5} color="#FC5A96" background="#CCCCCC" />
</Knob>

Result

Loading...

Properties

Prop	Description
arcWidth	Width of the arc. The arc will expand to the centre.
background	Color of the arc over the whole range of the knob. If background is not set, the background arc will not rendered.
color	Color of the arc that indicates the value of the knob.
radius	Outer radius of the arc. Will be the knob size by default