Vue Knob / Guides / Angles

The vue-knob component also supports some customization for the angles.

#Start / End Angles

The start and end angles can be set using the start-angle and end-angle props which set the limits for the label anchors to calculate their spacing between.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        :start-angle="90"
        :end-angle="270"
    />
</template

#Manual Angles

If something specific is required any angle can be explicitly set in the options.

<template>
    <vue-knob
        v-model="knob.value"
        :options="[{
            value: 1,
            angle: 97
        }, {
            value: 10,
            angle: 127
        }]"
    />
</template

#Anchor Offsets

The anchor-offset props allows for an adjustment of the anchors which is useful in some cases for better alignment with the way labels are displayed.

<template>
    <vue-knob
        v-model="knob.value"
        :options="knob.options"
        :anchor-offset="3"
    />
</template