RadialGauge Class

The radial-gauge component may contain a wijmo.react.gauge.Range child component.

The component supports all properties and events of the pure JavaScript wijmo.gauge.RadialGauge control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

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

<Wj.RadialGauge
  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 }}
  ranges={[
      { 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.