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

The component supports all properties and events of the pure JavaScript wijmo.gauge.BulletGraph 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.BulletGraph control in JSX:

<Wj.BulletGraph
  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.

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

The component supports all properties and events of the pure JavaScript wijmo.gauge.LinearGauge 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.LinearGauge control in JSX:

<Wj.LinearGauge
  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.

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.

The range component should be contained in one of the following components: wijmo.react.gauge.LinearGauge , wijmo.react.gauge.BulletGraph or wijmo.react.gauge.RadialGauge.

The component supports all properties and events of the pure JavaScript wijmo.gauge.Range class 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.