<div class="header-panel member">
<h2><span class="identifier">RadialGauge</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.react.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.react.Module.html"><span class="identifier">wijmo.react</span></a></dd>
<dt>Base Class</dt><dd><a href="topic/wijmo.react.ComponentBase.Class.html"><span class="identifier">ComponentBase</span></a></dd>
<dt>Show</dt>
<dd>
<label><input type="checkbox" ng-model="ctx.showInherited"> Inherited Members</label>&nbsp;&nbsp;&nbsp;
<label><input type="checkbox" ng-model="ctx.showRaisers"> Event Raisers</label>
</dd>
</dl>
<div class="comment"><p>React component that encapsulates the <a href="topic/wijmo.gauge.RadialGauge.Class.html"><span class="identifier">RadialGauge</span></a> control.</p>
<p>The example below shows how to instantiate and initialize a
<a href="topic/wijmo.gauge.RadialGauge.Class.html"><span class="identifier">RadialGauge</span></a> control in JSX:</p>


<pre>&lt;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={&#8203;{ thickness:0.5 }}
  pointer={&#8203;{ thickness:0.5 }}
  ranges={[
      { min: 0, max: 333, color: 'red' },
      { min: 333, max: 666, color: 'gold' },
      { min: 666, max: 1000, color: 'green' }
  ]} /&gt;</pre>
<p>The code <b>min</b>, <b>max</b>, <b>step</b>, and <b>isReadOnly</b> properties
to define the range of the gauge and to allow users to edit its value.
Next, it sets the <b>value</b> and <b>valueChanged</b> properties to create
a two-way binding for the gauge's value.</p>
<p>Then it sets the <b>format</b>, <b>thumbSize</b>, and <b>showRanges</b>
properties to define the appearance of the gauge. Finally, the markup sets
the thickness of the <b>face</b> and <b>pointer</b> ranges, and extra ranges
that will control the color of the <b>value</b> range depending on the gauge's
current value.</p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
</div>
