Sets or gets whether the jqxKnob's value can be changed on click.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :allowValueChangeOnClick="false" :allowValueChangeOnDrag="false"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets whether the jqxKnob's value can be changed by dragging the pointer.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :allowValueChangeOnClick="false" :allowValueChangeOnDrag="true"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets whether the jqxKnob's value can be changed on mouse wheel.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :allowValueChangeOnMouseWheel="false"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :changing="changing"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    },
    methods: {
      changing: function (oldValue, newValue) {
        alert('changing');
      }
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's angle where dragging the pointer will end.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :dragEndAngle="420"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's degrees where dragging the pointer can start.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :dragStartAngle="120"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets whether the Knob is disabled.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :disabled="true"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's dial.

• innerRadius - specifies the inner Radius of the dial.
• outerRadius - specifies the outer Radius of the dial.
• style - specifies the style of the dial. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
• startAngle - dial's start angle(optional).
• endAngle - dial's end angle(optional).

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :dial="dial"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        dial: {
          innerRadius: '0%', /*specifies the inner Radius of the dial*/
          outerRadius: '65%', /*specifies the outer Radius of the dial*/
          style: {
            stroke: '#ff0000', strokeWidth: 1, fill: { color: '#66707e', gradientType: "linear", gradientStops: [[0, 1], [50, 0.4], [100, 1]] }
          }
        },
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's degrees offset for the 360 location.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's height.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :height="400"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's labels.

• rotate - specifies if labels should be vertical or rotated with the appropriate angle.
• offset - specifies the labels offset.
• visible - determines the labels visibility.
• step - sets the labels step.
• formatFunction - function which can be used to format the labels.
  Example:

  
  formatFunction: function (label) {
      if (label == 0)
          return "Min";
      if (label == 100)
          return "Max";
      return label;
  }
                                       

• style - specifies the style of the labels. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's marks.

• colorProgress - hex color string.
• colorRemaining - hex color string.
• drawAboveProgressBar - draws the marks with z-index higher than the progress bar.
• minorInterval - minor ticks interval.
• majorInterval - major ticks interval.
• majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.
• offset - specifies the labels offset.
• size - specifies radius in case of circular lines, or length in case of lines.
• type - "circle" or "line".
• thickness - specifies thickness in case of lines.
• visible - determines the labels visibility.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's min property.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's max property.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's progressBar property.

• offset - specifies the progress bar's offset.
• style - specifies the style of the progressBar. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1
• background - specifies the background style of the progressBar. background.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1
• size - specifies the progress bar's size.
• ranges - array which specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's pointer property.

• type - specifies the pointer's type - "circle", "line", "arrow".
• style - specifies the style of the pointer. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
• size - specifies the pointer's size.
• thickness - specifies the pointer's thickness.
• visible - specifies whether the pointer is visible.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer").

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :pointerGrabAction="'pointer'"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's rotation("clockwise" or "counterclockwise").

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'counterclockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's degrees offset for the 0 location.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets Knob's spinner.

• innerRadius - specifies the inner Radius of the spinner.
• outerRadius - specifies the outer Radius of the spinner.
• style - specifies the style of the spinner. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
• marks -
  • rotate - sets whether spinner marks rotate with pointer.
  • colorProgress - hex color string.
  • colorRemaining - hex color string.
  • drawAboveProgressBar - draws the marks with z-index higher than the progress bar.
  • minorInterval - minor ticks interval.
  • majorInterval - major ticks interval.
  • majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.
  • offset - specifies the labels offset.
  • size - specifies radius in case of circular lines, or length in case of lines.
  • type - "circle" or "line".
  • thickness - specifies thickness in case of lines.
  • visible - determines the labels visibility.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :spinner="spinner"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        spinner: {
          style: { fill: { color: '#a2da39', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
          innerRadius: '45%', /*specifies the inner Radius of the dial*/
          outerRadius: '60%', /*specifies the outer Radius of the dial*/
          marks: {
            colorRemaining: '#fff',
            colorProgress: '#fff',
            type: 'line',
            offset: '46%',
            thickness: 2,
            size: '14%',
            majorSize: '14%',
            majorInterval: 10,
            minorInterval: 10
          },
        },
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's background style.

• fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]])
• stroke - border color(hex string).
• strokeWidth - border width.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's step property. Specifies the increase/decrease step.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :step="10"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="false"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's value.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the Knob's width.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels" :width="500"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxKnob.

<template>
  <JqxKnob ref="myKnob" @change="onChange($event)"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Destroys the widget.

<template>
  <JqxKnob ref="myKnob"
    :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
    :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
    :marks="marks" :labels="labels"
  />
</template>

 
<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';
 
  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return  {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10, 
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%', 
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.styles = this.styles;
      this.$refs.myKnob.destroy();
    }
  }
</script>
<style>
  text.jqx-knob-label {
     font-size: 20px;
  }
</style>

Sets or gets the value.

<template>
  <JqxKnob ref="myKnob"
       :value="60" :min="0" :max="100" :startAngle="120" :endAngle="420" :snapToStep="true"
       :rotation="'clockwise'" :pointer="pointer" :progressBar="progressBar"
       :marks="marks" :labels="labels" />
</template>

<script>
  import JqxKnob from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxknob.vue';

  export default {
    components: {
      JqxKnob
    },
    data: function () {
      return {
        styles: {
          stroke: '#dfe3e9', strokeWidth: 3,
          fill: {
            color: '#fefefe', gradientType: "linear",
            gradientStops: [[0, 1], [50, 0.9], [100, 1]]
          }
        },
        marks: {
          colorRemaining: { color: 'grey', border: 'grey' },
          colorProgress: { color: '#00a4e1', border: '#00a4e1' },
          type: 'line',
          offset: '71%',
          thickness: 3,
          size: '6%',
          majorSize: '9%',
          majorInterval: 10,
          minorInterval: 2
        },
        labels: {
          offset: '88%',
          step: 10,
          visible: true
        },
        progressBar: {
          style: { fill: '#00a4e1', stroke: 'grey' },
          size: '9%',
          offset: '60%',
          background: { fill: 'grey', stroke: 'grey' }
        },
        pointer: {
          type: 'circle',
          style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' },
          size: '10%',
          offset: '50%'
        }
      }
    },
    mounted: function () {
      this.$refs.myKnob.val(100);     
    }
  }
</script>
<style>
  text.jqx-knob-label {
    font-size: 20px;
  }
</style>