React UI Components Documentation

ReactJS Gauge Component

The Gauge component for ReactJS displays an indicator within a range of values.

Prerequisites

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

Configuration

The Gauge component for ReactJS requires the following imports.

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxGauge from 'jqwidgets-react/react_jqxgauge.js';

Then we create our component class. Properties and methods are put as ReactJS props.

  
class App extends React.Component {
  render () {
    return (
        <JqxGauge 
            width={500} height={500} 
            value={0} colorScheme={'scheme05'}
        />
    )
  }
}

Finally we render our class in the desired HTML element:

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

Events Methods & Properties

In order to bind to any event, change any property or call any method, we need a reference to the component.
For that we use the ReactJS "ref" Callback Attribute:

 
<JqxGauge ref='myGauge' width={500} height={500}..... />

Now, when we have a reference, we need to call the desired event/property/method.
This is done in the componentDidMount() ReactJS Component Lifecycle method.

 
class App extends React.Component {
  componentDidMount()
  {
     //your logic
  }
  render ()
  {
    return
    (
      ....
    )
  }
};

Events

The valueChanged event is triggered when the value is changed.

The following example demonstrates how to add an event listener:

 
componentDidMount ()
{
 
  this.refs.myGauge.on('valueChanged', (event) =>
  {
     //your logic
  });
 
}

Methods & Properties

This is how you call methods & props:

  
//Get Methods
let value = this.refs.myGauge.val();
 
//Set Methods
this.refs.myGauge.val(700);
 
//Get Properties
let height = this.refs.myGauge.height();
 
//Set Properties
this.refs.myGauge.height(25);

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

 
this.refs.myGauge.setOptions({
    caption: 
    {
        value: 'jQWidgets',
        position: 'bottom',
        offset: [0, 10],
        visible: true
    },
    width: 250,
    height: 30 
})

Every component also have a method getOptions which returns a object containing the component settings.

 
let options = this.refs.myGauge.getOptions();

Gauge Examples

Overview

The following example demonstrates how to create a Gauge component.

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

Gauge API

API Reference of the jQWidgets Gauge component for React: Gauge API