React UI Components Documentation

Sets or gets the allowValueChangeOnClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} allowValueChangeOnClick={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowValueChangeOnDrag property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} allowValueChangeOnDrag={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the allowValueChangeOnMouseWheel property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} allowValueChangeOnMouseWheel={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the changing property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} changing={changing}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragEndAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} dragEndAngle={420}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragStartAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} dragStartAngle={120}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dial property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} dial={dial}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the endAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} height={400}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the marks property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the progressBar property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} progressBar={progressBar}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pointer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pointerGrabAction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} pointerGrabAction={'normal'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rotation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} rotation={'counterclockwise'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the startAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the spinner property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} spinner={spinner}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the style property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} style={{ stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }}
            
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the step property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} step={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the snapToStep property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} snapToStep={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer} width={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxKnob.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKnob.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myKnob.destroy();
    }

    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxKnob from 'jqwidgets-react/react_jqxknob.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myKnob.val();
    }

    render() {       
        let 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
        };
        let labels =
        {
            offset: '88%',
            step: 10,
            visible: true
        };
        let pointer =
        {
            type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' },
            size: '59%', offset: '49%', thickness: 20
        };
        return (
            <JqxKnob ref='myKnob'
                value={60} min={0} max={100} startAngle={120} endAngle={420} 
                marks={marks} labels={labels} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));