React UI Components Documentation

Typescript React BarGauge Component

This tutorial will show you the basics of how to get started with the jQWidgets BarGauge React Component.

Prerequisites

Refer to Getting Started with React before you start with this help topic.

Structure

I. Imports:


import * as React from 'react';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';

II. Class:


class App extends React.PureComponent<{}, IBarGaugeProps> {
    constructor(props: {}) {
        super(props);
 
        this.state = {
            width: '100%'
            // Other Widget Props
        }
    }
   
    render() {
        return (
            <JqxBarGauge 
                width={this.state.width} height={"100%"} .....
            />
        )
    }
}

III. Render:


ReactDOM.render(<App />, document.getElementById('app'));

Events

The event names in React are constructed of the original event names starting with capital letter plus on upfront:


class App extends React.PureComponent<{}, IBarGaugeProps> {
    constructor(props: {}) {
        super(props);
 
        this.state = {
            width: '100%'
            // Other Widget Props
        }
    }
   
    render() {
        return (
            <JqxBarGauge onNameOfEvent={this.handleEvent}
                width={this.state.width} height={"100%"} .....
            />
        )
    }
 
    private handleEvent(e: Event): void {
        // Do Something ...
    }
}

Methods & Properties

This is how you call methods & props:


//Get Methods
const value = this.myBarGauge.current!.methodName(arg1, arg2);
 
//Set Methods
this.myBarGauge.current!.methodName(arg1, arg2);
 
//Get Properties
const height = this.state.height;
 
//Set Properties
this.setState({ height: 250 });

Every component have a method setOptions which accepts a object as an argument. This object contains component settings.


this.myBarGauge.current!.setOptions({ width: 350, height: 400 });

Every component also have a method getOptions which returns the value of the requested option.


const width = this.myBarGauge.current!.getOptions('width');

BarGauge API

API Reference of the jQWidgets BarGauge React Component: BarGauge API

BarGauge Demos

Demos Reference of the jQwidgets BarGauge React Component: BarGauge Demos