The Scale component draw graduation.

The number of ticks is set by the steps prop of the parent Knob component.

The single scale tick can be a SVG rect or circle. Additionally a render function can be passed as a prop, that will render each tick.

This is useful if the scale ticks should have different colors, or different tick length for every 10th tick for example.

Live Editor

<Knob
    size={200}
    angleOffset={220}
    angleRange={280}
    min={0}
    max={100}
    steps={10} // amount of intervals
>
    <Scale
        tickWidth={5}
        tickHeight={10}
        radius={45}
        color="#FC5A96"
        activeColor="#180094"
    />
</Knob>

Result

Properties

Prop	Description
`type`	Can be `rect` or `circle`, default is `rect`. Will render the according SVG element. `tickWidth` and/or `tickHeight` props needs to be set.
`radius`	Outer radius where the ticks ends.
`tickWidth`	Width of a single tick. Used as radius if type is `circle`.
`tickHeight`	Height of a single tick. Is ignored when type is `circle`.
`color`	Will be passed as color prop to the render SVG element of a tick or to the custom render function.
`activeColor`	Color for the tick that indicates the same value as the current knob value.
`className`	Will be passed as prop to the render SVG element of a tick or to the custom render function.
`activeClassName`	`className` for the tick that indicates the same value as the current knob value.
`fn`	Function that can be used to have the full control over how a tick is rendered. The function needs to return a SVG element. See details bellow.

Custom function

The property fn can be used to have the full control over how a tick is rendered.

The function needs to return a SVG element.

The function will get the following props passed:

active
activeClassName
activeColor
angleOffset
center
className
color
stepSize
tickHeight
translateX
translateY
tickWidth
percentage
steps

Most of them are just passed down from the Pointer or the Knob.

Additional are:

center, the half of the size of the Knob
stepSize, the size of the angle of one step in degree
translateX, translateY that are needed to put the tick on the correct position using the transform prop e.g: transform={`translate(${translateX} ${translateY})`}
i which is the index of the current tick.

Custom function​

Custom function