次の例は、JSXで wijmo.gauge.BulletGraph コントロールをインスタンス化して初期化する方法を示します。

<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' }
  ]} />

このコードは、 min, max、 step、isReadOnly の各プロパティを設定して、 ゲージの範囲を定義し、ユーザーがゲージの値を編集できるようにします。 次に、 value プロパティと valueChanged プロパティを設定して、ゲージの値に対して双方向連結を構築します。

次に、 format、 thumbSize、 showRanges の各プロパティを設定して、ゲージの外観を定義します。 最後に、このマークアップは、 face 範囲と pointer 範囲の太さを設定し、 ゲージの現在の値に応じて value 範囲の色を制御するために、いくつかの範囲を設定します。