React UI Components Documentation

Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the border property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} border={border}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the caption property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} caption={caption}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cap property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} cap={cap}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the colorScheme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} colorScheme={'scheme01'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the easing property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} easing={'linear'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the endAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} endAngle={250}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} height={400}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the int64 property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} int64={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the labels property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} labels={labels}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} min={10}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} max={210}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the pointer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} pointer={pointer}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the radius property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} radius={150}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ranges property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} ranges={ranges}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the startAngle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} startAngle={40} endAngle={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showRanges property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} showRanges={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the style property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} style={style}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticksMajor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} ticksMajor={ticksMajor}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticksMinor property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} ticksMinor={ticksMinor}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the ticksDistance property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} ticksDistance={'50%'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} value={100}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200} width={300}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

The event is is triggered when the gauge's value is changing.

Code examples

Bind to the valueChanging event of jqxGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myGauge.on('valueChanging', (event) => {
            // Do Something...
        });
    }

    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

The event is is triggered when the gauge's value is changed.

Code examples

Bind to the valueChanged event of jqxGauge.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myGauge.on('valueChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myGauge.disable();
    }

    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myGauge.enable();
    }

    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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

    render() {       
        let ticksMinor = { interval: 5, size: '5%' };
 
        let ticksMajor = { interval: 10, size: '9%' };
 
        let ranges =
        [
            { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
            { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
            { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
            { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
        ];
        return (
            <JqxGauge ref='myGauge'
                ranges={ranges} ticksMinor={ticksMinor} ticksMajor={ticksMajor}
                value={0} colorScheme={'scheme05'} animationDuration={1200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));