Properties

NameTypeDefault
allowValueChangeOnClick boolean true

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} allowValueChangeOnClick={false}
        allowValueChangeOnDrag={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
allowValueChangeOnDrag boolean true

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} allowValueChangeOnClick={false}
        allowValueChangeOnDrag={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
allowValueChangeOnMouseWheel boolean true

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} allowValueChangeOnMouseWheel={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
changing (oldValue: KnobChanging['oldValue'], newValue: KnobChanging['newValue']) => boolean null
Interface KnobChanging {
  oldValue?: number;
  newValue?: number;
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        changing: (oldValue: number, newValue: number): any => {
          alert('changing');
        },
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} changing={this.state.changing}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragEndAngle number 0

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} dragEndAngle={420}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragStartAngle number 360

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} dragStartAngle={120}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets whether the Knob is disabled. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dial KnobDial null
Interface KnobDial {
  innerRadius?: any;
  outerRadius?: any;
  style?: any;
  startAngle?: number;
  endAngle?: number;
}

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). 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} dial={this.state.dial}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
endAngle number 360

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height number | string 400

Sets or gets the Knob's height. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} height={400}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
labels KnobLabels null
Interface KnobLabelsFormatFunction {
  formatFunction?: (label: string | number) => string | number;
}

Interface KnobLabels {
  rotate?: any;
  offset?: number | string;
  visible?: boolean;
  step?: number;
  style?: any;
  formatFunction?: KnobLabelsFormatFunction['formatFunction'];
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
marks KnobMarks null
KnobSpinnerMarksType: "circle" | "line"

Interface KnobMarks {
  colorProgress?: any;
  colorRemaining?: any;
  drawAboveProgressBar?: boolean;
  minorInterval?: number;
  majorInterval?: number;
  majorSize?: number | string;
  offset?: string;
  rotate?: boolean;
  size?: number | string;
  type?: KnobSpinnerMarksType;
  thickness?: number;
  visible?: boolean;
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number 0

Sets or gets the Knob's min property. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
max number 100

Sets or gets the Knob's max property. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
progressBar KnobProgressBar null
Interface KnobProgressBar {
  offset?: number | string;
  style?: any;
  size?: number | string;
  background?: any;
  ranges?: Array<any>;
}

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 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
pointer KnobPointer null
Interface KnobPointer {
  offset?: number | string;
  type?: string;
  style?: any;
  size?: number | string;
  thickness?: number;
  visible?: boolean;
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
pointerGrabAction KnobPointerGrabAction "normal"
KnobPointerGrabAction: "normal" | "progressBar" | "pointer"

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} pointerGrabAction={'pointer'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rotation KnobRotation "clockwise"
KnobRotation: "clockwise" | "counterclockwise"

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'counterclockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
startAngle number 0

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinner KnobSpinner null
Interface KnobMarks {
  colorProgress?: any;
  colorRemaining?: any;
  drawAboveProgressBar?: boolean;
  minorInterval?: number;
  majorInterval?: number;
  majorSize?: number | string;
  offset?: string;
  rotate?: boolean;
  size?: number | string;
  type?: KnobSpinnerMarksType;
  thickness?: number;
  visible?: boolean;
}

Interface KnobSpinner {
  innerRadius?: any;
  outerRadius?: any;
  style?: any;
  marks?: KnobMarks;
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} spinner={this.state.spinner}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
styles KnobStyle null
Interface KnobStyle {
  fill?: any;
  stroke?: string;
  strokeWidth?: number;
}

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. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
step number | string 1

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} step={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
snapToStep boolean true

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

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={false}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value any 0

Sets or gets the Knob's value. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width number | string 400

Sets or gets the Knob's width. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels} width={500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxKnob. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} onChange={this.onChange} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
destroy None

Destroys the widget. 

/* CSSStylesheet.css */
  text.jqx-knob-label {
     font-size: 20px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
 
class App extends React.PureComponent<{}, IKnobProps> {
  private myKnob = React.createRef<JqxKnob>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        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%'
        }
    }
  }
 
  public componentDidMount(): void {
    this.myKnob.current!.styles = this.styles;
    this.myKnob.current!.destroy();
  }
  
  public render() {
    return (
      <JqxKnob ref={this.myKnob} 
        value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true}
        rotation={'clockwise'} pointer={this.state.pointer} progressBar={this.state.progressBar}
        marks={this.state.marks} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

Sets or gets the value.