Properties

NameTypeDefault
animationDuration string | number 400

Sets or gets jqxGauge's animation duration [ms]. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
border GaugeBorder { size: '10%', style: { stroke: '#cccccc'}, visible: true, showGradient: true }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugeBorder {
  size?: number | string;
  visible?: boolean;
  style?: GaugeStyle;
  showGradient?: boolean;
}

Sets or gets the gauge's properties for it's border.

Possible Values: 
'size'-specifies the size of the border. Border's size can be set in percentage or in pixels
'visible'-indicates if the border will be visible
'style'-sets border style (color and thickness)
'showGradient' - whether a gradient background will be used
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        border: { size: '11%', style: { stroke: '#898989'}, visible: true },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} border={this.state.border}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
caption GaugeCaption { value: '', position: 'bottom', offset: [0, 0], visible: true }
GaugePosition: "top" | "bottom"

Interface GaugeCaption {
  value?: string;
  position?: GaugePosition;
  offset?: Array<number>;
  visible?: boolean;
}

Sets or gets the gauge's properties for it's caption.

Possible Values: 
'value' - specifies the text
'position' - specifies the caption position. There four different positions - top, bottom, left and right. You can customize the position using the offset property described bellow
'offset' - array with two number elements. The first one indicates the left offset and the second one the top offset
'visible' - indicates whether the caption will be visible
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        caption: { value: 'jQWidgets', position: 'bottom', offset: [0, 10], visible: true },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} caption={this.state.caption}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
cap GaugeCap { size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' } , visible: true }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugeCap {
  size?: number | string;
  visible?: boolean;
  style?: GaugeStyle;
}

Sets or gets the gauge's properties for it's cap.

Possible Values: 
'size' - specifies the gauge's size. This property can be set as percentage or in pixels
'visible' - indicates whether the cap will be visible
'style' - specifies the gauge's cap styles. Here you can set it's fill or stroke colors
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        cap: { size: '5%', style: { fill: '#ff0000', stroke: '#00ff00' } , visible: true },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} cap={this.state.cap}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
colorScheme string 'scheme01'

Sets the gauge's color pallete. jqxGauge suppports 11 color schemes from 'scheme01' to 'scheme11'. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} colorScheme={'scheme01'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets whether the jqxGauge is disabled. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
easing GaugeEasing linear
GaugeEasing: "linear" | "easeOutBack" | "easeInQuad" | "easeInOutCirc" | "easeInOutSine" | "easeOutCubic"

Sets or gets jqxGauge's animation easing.

Possible Values: 
'linear'
'easeOutBack'
'easeInQuad'
'easeInOutCirc'
'easeInOutSine'
'easeOutCubic'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} easing={'linear'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
endAngle number | string 270

Sets or gets gauge's endAngle. This property specifies the end of the gauge's scale and is measured in degrees. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} endAngle={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height number | string 350

Sets or gets the gauge's height. This property accepts size in pixels and percentage. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} height={400}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
int64 boolean false

Enables the jqxGauge 64-bit number support.

Note: If this property is set to true, the properties value, min, max, ranges.startValue, ranges.endValue, ticksMinor.interval, ticksMajor.interval and labels.interval should be set to string values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} int64={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
labels GaugeLabels { distance: '38%', position: 'none', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) { return value; }}
GaugeLabelsPosition: "none" | "inside" | "outside"

Interface GaugeLabels {
  distance?: string;
  position?: GaugeLabelsPosition;
  interval?: number | string;
  offset?: Array<number>;
  visible?: boolean;
  formatValue?: (value?: number) => string;
}

Sets or gets the gauge's properties for it's labels.

Possible Values: 
'distance' - specifies the labels distance from the gauge's center. This value could be set in percents ('0%' - '100%') or using pixels. This property is with lower priority than the position property
'position' - specifies the gauge's labels position. Possible values for this property are 'inside', 'outside' and 'none' (if you want to use the distance property). If it's value is inside the labels are going to be shown inside the scale otherwise they will be shown outside. This property is with higher priority than the distance property
'interval' - specifies labels's frequency
'offset' - specifies labels's offset. This property is array with two elements. The first one is the left offset and the second one is the top offset
'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color
'formatValue' - callback used for formatting the label. This function accepts a single parameter which the user can format and return to the labels renderer
'visible' - indicates whether the labels will be visible
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        labels: { distance: '50px', position: 'inside', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) {return value; } },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number 0

Sets or gets gauge's minimum value.

max number | string 220

Sets or gets jqxGauge's max value.

pointer GaugePointer { pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugePointer {
  pointerType?: string;
  style?: GaugeStyle;
  width?: number | string;
  length?: number | string;
  visible?: boolean;
}

Sets or gets the gauge's properties for it's pointer.

Possible Values: 
'pointerType' - specifies the pointer type. Possible values for this property are - 'default' and 'rectangle'. If it's value is 'default' the pointer will be arrow otherwise it'll be rectangle
'style' - specifies the gauge's pointer style. Here you can set it's fill or stroke color
'width' - specifies pointer's width. This property can be set in percents ('0%' - '100%') or in pixels
'length' - specifies pointer's length. This property can be set in percents ('0%' - '100%') or in pixels
'visible' - indicates whether the pointer will be visible
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        pointer: { pointerType: 'rectangle', style: { fill: '#ff0000', stroke: '#ff0000' }, length: '80%', width: '3%', visible: true },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} pointer={this.state.pointer}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
radius number | string '50%'

Sets or gets gauge's radius. This property accepts size in pixels and percentage. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} radius={150}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
ranges Array<GaugeRanges> []
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugeRanges {
  startValue?: number | string;
  endValue?: number | string;
  startWidth?: number | string;
  endWidth?: number | string;
  startDistance?: number | string;
  endDistance?: number | string;
  style?: GaugeStyle;
}

This property is array of objects. Each object is different range. The range is colored area with specified size.

Possible Values: 
'startValue'-the value from which the range will start
'endValue'-the value where the current range will end
'startWidth'-the width of the range in it's start
'endWidth'-the end width of the range
'startDistance [optional]'-this property is measured in pixels or percentage. It indicates the distance from the gauge's outer boundary to the start of the range
'endDistance [optional]'-this property is measured in pixels or percentage. It indicates the distance from the gauge's outer boundary to the end of the range
'style'-this property is object containing style information for the range. It accepts properties like 'fill', 'stroke', etc.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ranges: undefined,
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
startAngle number | string 30

Sets or gets gauge's startAngle. This property specifies the beggining of the gauge's scale and is measured in degrees. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} startAngle={40} endAngle={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showRanges boolean true

This property indicates whether the gauge's ranges will be visible. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} showRanges={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
styles GaugeStyle { fill: '#ffffff', stroke: '#ffffff' }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Sets or gets the gauge's style. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        styles: { fill: '#cccccc', stroke: '#cccccc' },
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} styles={this.state.styles}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
ticksMajor GaugeTicks { size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugeTicks {
  size?: number | string;
  interval?: number | string;
  visible?: boolean;
  style?: GaugeStyle;
}

Sets or gets the gauge's properties for it's major ticks.

Possible Values: 
'size'-specifies the length of the tick. This property is measured in pixels or percentage
'interval'-specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a major tick
'visible'-indicates if the major ticks will be visible
'style'-sets ticks style (color and thickness)
ticksMinor GaugeTicks { size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
Interface GaugeStyle {
  fill?: string;
  stroke?: string;
}

Interface GaugeTicks {
  size?: number | string;
  interval?: number | string;
  visible?: boolean;
  style?: GaugeStyle;
}

Sets or gets the gauge's properties for it's minor ticks.

Possible Values: 
'size'-specifies the length of the tick. This property can be set in pixels or in percentag
'interval'-specifies the ticks frequency. With interval equals to 5 each fifth value of the gauge will have a minor tick
'visible'-indicates if the minor ticks will be visible
'style'-sets ticks style (color and thickness)
ticksDistance string '20%"

Sets and gets the ticks position. This property can be specified using percents (between '0%' and '100%') or using pixels. If the ticksRadius is '0%' this will position the ticks in the outer border of the gauge and if it's '100%' ticks will be positioned near the center. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} ticksDistance={'50%'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value number 0

Sets or gets gauge's value. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} value={100}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width number | string 350

Sets or gets the gauge's width. This property accepts size in pixels and percentage. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200} width={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

valueChanging Event

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

Code examples

Bind to the valueChanging event of jqxGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} onValueChanging={this.onValueChanging} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200}
      />
    );
  }
 
  private onValueChanging(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
valueChanged Event

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

Code examples

Bind to the valueChanged event of jqxGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} onValueChanged={this.onValueChanged} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200}
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
disable None

This method disables the gauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGauge, { IGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgauge';
 
class App extends React.PureComponent<{}, IGaugeProps> {
  private myGauge = React.createRef<JqxGauge>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        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 }
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myGauge.current!.value = 140;
    this.myGauge.current!.disable();
  }
  
  public render() {
    return (
      <JqxGauge ref={this.myGauge} 
        ranges={this.state.ranges} ticksMinor={this.state.ticksMinor} ticksMajor={this.state.ticksMajor}
        animationDuration={1200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enable None

This method enables the gauge.

val value

Sets or gets the value.