wijmo.react.gauge Class RadialGauge Wijmo API Class

RadialGauge Class

React component that encapsulates the wijmo.gauge.RadialGauge control.

The example below shows how to instantiate and initialize a wijmo.gauge.RadialGauge control in JSX:

  min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
  value={ this.state.view.currentItem.sales }
  valueChanged={ this.salesChanged }
  format="c0" thumbSize={ 20 } showRanges={ false }
  face={​{ thickness:0.5 }}
  pointer={​{ thickness:0.5 }}
      { min: 0, max: 333, color: 'red' },
      { min: 333, max: 666, color: 'gold' },
      { min: 666, max: 1000, color: 'green' }
  ]} />

The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it sets the value and valueChanged properties to create a two-way binding for the gauge's value.

Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.