React Knob API Reference

Name	Type	Default
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
Name	Arguments	Return 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.

Properties

Events

Code examples

Methods