| 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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
allowValueChangeOnClick={false}
allowValueChangeOnDrag={false}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
allowValueChangeOnClick={false}
allowValueChangeOnDrag={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
allowValueChangeOnMouseWheel={false}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const changing = useMemo<IKnobProps['changing']>(
() =>
(_oldValue: number | number[], _newValue: number | number[]): any => {
alert('changing');
},
[]
);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
changing={changing}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
dragEndAngle={420}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
dragStartAngle={120}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
disabled
# |
boolean
|
false
|
Sets or gets whether the Knob is disabled.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
disabled={true}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const dial = useMemo<IKnobProps['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]
]
}
}
}),
[]
);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
dial={dial}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
number | string
|
400
|
Sets or gets the Knob's height.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
height={400}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
min
# |
number
|
0
|
Sets or gets the Knob's min property.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
max
# |
number
|
100
|
Sets or gets the Knob's max property.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
pointerGrabAction={'pointer'}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'counterclockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const spinner = useMemo<IKnobProps['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
}
}),
[]
);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
spinner={spinner}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
step={10}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={false}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from "react-dom/client";
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps["styles"]>(() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: "linear",
gradientStops: [[0, 1], [50, 0.9], [100, 1]]
}
}), []);
const marks = useMemo<IKnobProps["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
}), []);
const labels = useMemo<IKnobProps["labels"]>(() => ({
offset: '88%',
step: 10,
visible: true
}), []);
const progressBar = useMemo<IKnobProps["progressBar"]>(() => ({
style: {
fill: '#00a4e1',
stroke: 'grey'
},
size: '9%',
offset: '60%',
background: {
fill: 'grey',
stroke: 'grey'
}
}), []);
const pointer = useMemo<IKnobProps["pointer"]>(() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: "linear",
gradientStops: [[0, 0.5], [50, 0.6], [100, 1]]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}), []);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return <JqxKnob ref={myKnob} value={60} min={0} max={100} startAngle={120} endAngle={420} snapToStep={true} rotation={'clockwise'} pointer={pointer} progressBar={progressBar} marks={marks} labels={labels} theme={'material'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
value
# |
any
|
0
|
Sets or gets the Knob's value.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
number | string
|
400
|
Sets or gets the Knob's width.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
width={500}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
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 */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
const onChange = (_e: Event): void => {
alert('do something...');
};
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
}, []);
return (
<JqxKnob
ref={myKnob}
onChange={onChange}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
| Name | Arguments | Return Type |
|---|
|
destroy
# |
None
|
|
Destroys the widget.
/* CSSStylesheet.css */
text.jqx-knob-label {
font-size: 20px;
}
/* End CSSStylesheet.css */
import { createRoot } from 'react-dom/client';
import { useEffect, useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxKnob, { type IKnobProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxknob';
function App() {
const myKnob = useRef<JqxKnob>(null);
const styles = useMemo<IKnobProps['styles']>(
() => ({
stroke: '#dfe3e9',
strokeWidth: 3,
fill: {
color: '#fefefe',
gradientType: 'linear',
gradientStops: [
[0, 1],
[50, 0.9],
[100, 1]
]
}
}),
[]
);
const marks = useMemo<IKnobProps['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
}),
[]
);
const labels = useMemo<IKnobProps['labels']>(
() => ({ offset: '88%', step: 10, visible: true }),
[]
);
const progressBar = useMemo<IKnobProps['progressBar']>(
() => ({
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
}),
[]
);
const pointer = useMemo<IKnobProps['pointer']>(
() => ({
type: 'circle',
style: {
fill: {
color: '#a4a3a3',
gradientType: 'linear',
gradientStops: [
[0, 0.5],
[50, 0.6],
[100, 1]
]
},
stroke: '#333'
},
size: '10%',
offset: '50%'
}),
[]
);
useEffect(() => {
myKnob.current!.setOptions({ styles: styles });
myKnob.current!.destroy();
}, []);
return (
<JqxKnob
ref={myKnob}
value={60}
min={0}
max={100}
startAngle={120}
endAngle={420}
snapToStep={true}
rotation={'clockwise'}
pointer={pointer}
progressBar={progressBar}
marks={marks}
labels={labels}
/>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
val
# |
value
|
|
|
|
