Label

The Label component draw a label at a fixed location using polar coordinates.

Live Editor

<Knob size={100} angleOffset={220} angleRange={280} min={0} max={100}>
    <Label
        percentage={0.0}
        radius={40}
        label="BEGIN"
        style={{ fontSize: '50%' }}
    />
    <Label
        percentage={0.5}
        radius={40}
        label="MIDDLE"
        style={{ fontSize: '50%' }}
    />
    <Label
        percentage={1.0}
        radius={40}
        label="END"
        style={{ fontSize: '50%' }}
    />
</Knob>

Result

Loading...

Properties

Prop	Description
className	Will be added to the SVG text element.
label	Label to display.
percentage	Location of the label in percentage of the value range
radius	Radius of the center of the label
style	Will be added to the SVG text element.
userSelect	Added to the style. Default is none to avoid text selection.