React UI Components Documentation

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);

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);

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);

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);

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);

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);

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);

/* 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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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.

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);

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);

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);

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);

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);

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);

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);