Properties

NameTypeDefault
animationDuration number 1000

Determines the animation in milliseconds. To disable this property - set it to 0 (zero). 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} animationDuration={500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backgroundColor string #e0e0e0

Sets or gets the jqxBarGauge background color. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} backgroundColor={'red'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
barSpacing number 4

Sets or gets the space between the segments of the jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} barSpacing={12}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
baseValue number null

Sets the base value of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} baseValue={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
colorScheme string scheme01

Sets the jqxBarGauge's color palette. jqxBarGauge suppports 27 color schemes from 'scheme01' to 'scheme27'. I's possible to set custom scheme in combination with "customColorScheme" property. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
customColorScheme BarGaugeCustomColorScheme scheme01
Interface BarGaugeCustomColorScheme {
  name?: string;
  colors?: Array<string>;
}

Sets custom color palette in the BarGauge. This is used in combination with "colorScheme" property. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} colorScheme={'scheme'}
        customColorScheme={{"name":"scheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets the values of the disabled property of jqxBarGauge. By default is false. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
endAngle number 0 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} endAngle={180}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
formatFunction (value?: number | string, index?: number, color?: string) => string null

Sets or gets the formatFunction of the BarGauge. Used to make changes on the particular segment. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      formatFunction: (): any => {
        return 'red';
      }
    }
  }  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} formatFunction={this.state.formatFunction}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number 400

Sets or gets the BarGauge's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
labels BarGaugeLabels null
Interface BarGaugeLabelsFont {
  color?: string;
  size?: number | string;
  family?: string;
}

Interface BarGaugeLabels {
  connectorColor?: string;
  connectorWidth?: number;
  font?: BarGaugeLabelsFont;
  formatFunction?: (value?: number, index?: number) => string;
  indent?: number;
  precision?: number;
  visible?: boolean;
}

This property is used to make fine settings on BarGauge labels at each segment. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        labels: {
          connectorColor: 'red',
          connectorWidth: 1,
          font: { color: 'darkseagreen', size: 12 },
          formatFunction: function (value, index) {
            return value + ' USD';
          },
          indent: 15,
          precision: 1,
          visible: true
        }
    }
  }  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} labels={this.state.labels}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
max number | string 100

Sets or gets the end value of BarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={60} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number 0

Sets or gets BarGauge's min. This property specifies the beggining of the BarGauge's scale. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} min={-25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
relativeInnerRadius number | string 0.3

Sets or gets the relativeInnerRadius of jqxBarGauge. It's value represents the proportion between inner and outer radius. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} relativeInnerRadius={0}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rendered () => void null

This function is called when the BarGauge is initialized and the binding is complete. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      rendered: (): any => {
        alert('rendered!')
      }
    }
  }  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} rendered={this.state.rendered}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
startAngle number 225

Sets or gets the startAngle of the BarGauge. Used to create geometry of the arc in the space. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} startAngle={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
title BarGaugeTitle null
BarGaugeHorizontalTitleAlignment: "left" | "center" | "right"

BarGaugeVerticalTitleAlignment: "top" | "bottom"

Interface BarGaugeTextFont {
  color?: string;
  family?: string;
  opacity?: number;
  size?: number | string;
  weight?: number;
}

Interface BarGaugeTitleMargin {
  bottom?: number;
  left?: number;
  right?: number;
  top?: number;
}

Interface BarGaugeTitleSubtitle {
  text?: string;
  font?: BarGaugeTextFont;
}

Interface BarGaugeTitle {
  text?: string;
  font?: BarGaugeTextFont;
  horizontalAlignment?: BarGaugeHorizontalTitleAlignment;
  margin?: BarGaugeTitleMargin;
  subtitle?: BarGaugeTitleSubtitle;
  verticalAlignment?: BarGaugeVerticalTitleAlignment;
}

Sets or gets the BarGauge's title. This property can be string or object with custom title settings. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        title: {
          text: 'Ranking',
          font: { color: 'rosybrown', size: 25 }
        }
    }
  }  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} title={this.state.title}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
tooltip BarGaugeTooltip null
Interface BarGaugeTooltip {
  classname?: string;
  formatFunction?: (value?: number | string, index?: number, color?: string) => string;
  visible?: boolean;
  precision?: number;
}

Sets or gets the BarGauge's tooltip. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        tooltip: {
          classname: 'myTooltip',
          visible: true,
          precision: 0,
          formatFunction: function (value, index) {
            return value + ' USD';
          }
        }
    }
  }  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} tooltip={this.state.tooltip}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
useGradient boolean true

Sets or gets useGradient of the BarGauge. Change visualization of the segments between flat color or with gradient. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]} useGradient={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
values Array<number> []

Sets or gets array of values for the BarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number 400

Sets or gets the BarGauge's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

drawEnd Event

The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.

Code examples

Bind to the drawEnd event of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} onDrawEnd={this.onDrawEnd} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
 
  private onDrawEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
drawStart Event

The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event.

Code examples

Bind to the drawStart event of jqxBarGauge.

initialized Event

Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.

Code examples

Bind to the initialized event of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} onInitialized={this.onInitialized} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
 
  private onInitialized(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
tooltipClose Event

Fires when a BarGauge's tooltip is closed.

Code examples

Bind to the tooltipClose event of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  public componentDidMount(): void {
    this.myBarGauge.current!.setOptions({ tooltip: { visible: true } });
  }
   
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} onTooltipClose={this.onTooltipClose} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
 
  private onTooltipClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
tooltipOpen Event

Fires when a BarGauge's tooltip is open.

Code examples

Bind to the tooltipOpen event of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  public componentDidMount(): void {
    this.myBarGauge.current!.setOptions({ tooltip: { visible: true } });
  }
   
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} onTooltipOpen={this.onTooltipOpen} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
 
  private onTooltipOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
valueChanged Event

Fires after the values are changed.

Code examples

Bind to the valueChanged event of jqxBarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();  
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} onValueChanged={this.onValueChanged} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
 
  private onValueChanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
refresh None

Refreshes the BarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  public componentDidMount(): void {
    this.myBarGauge.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
render None

Renders the BarGauge contents. This method completely refreshes the BarGauge. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  public componentDidMount(): void {
    this.myBarGauge.current!.render();
  }
   
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

Returns an array of the BarGauge values. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
  private myBarGauge = React.createRef<JqxBarGauge>();
 
  public componentDidMount(): void {
    this.myBarGauge.current!.val([30, 80, 120]);
  }
   
  
  public render() {
    return (
      <JqxBarGauge ref={this.myBarGauge} 
        width={600} height={600} max={150} values={[102, 115, 130, 137]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);