# Gauges Overview

Learn how to use Wijmo Gauge components in this documentation topic

## Content

Gauges are used to display single values. They are often used in dashboards, and use segmenting and color coding to present values in a clear and easy to read way.

![Wijmo Gauges](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/gauge/gauge-overview.png)

Wijmo gauges are streamlined. They were designed to be easy to use and to read, especially on small-screen devices. They can also be used as input controls. If you set their __isReadOnly__ property to false, users will be able to change the value using the mouse, keyboard, or touch. For more details, see [Using Gauges As Input](/wijmo/docs/Topics/Gauge/Concepts/Using-Gauges-As-Input)

The __wijmo.gauge__ module includes three controls:
* __RadialGauge__: displays a circular scale with an indicator that represents a single value and optional ranges to represent reference values.
* __LinearGauge__: displays a linear scale with an indicator that represents a single value and optional ranges to represent reference values.
* __BulletGraph__: displays a single key measure along with a comparative measure and qualitative ranges to instantly signal whether the measure is good, bad, or in some other state.

## Gauge Architecture
The hierarchy of gauge classes is as follows:

* __Gauge__: Abstract base class.
    * __RadialGauge__: Displays values along a circular scale. 
    * __LinearGauge__: Displays values along a linear scale. 
        * __BulletGraph__: Displays actual and target values along a linear scale. 

The root Gauge class provides basic elements shared by all Gauge classes:
* An SVG-based control template with customizable parts.
* A common set of properties, events and methods including __min__, __max__, __value__, and __ranges__.


## Gauge Basic Features
The main properties common to all Wijmo gauge classes are:
 * __min__: The smallest value that can be displayed on the gauge.
* __max__: The largest value that can be displayed on the gauge.
* __value__: The current value displayed on the gauge.
* __showText__: Whether to show the min/max/value properties as text on the gauge.
  * For more details, see [Showing Text On Gauge](/wijmo/docs/Topics/Gauge/Concepts/Showing-Text)

Example:
```JavaScript
import * as gauge from '@mescius/wijmo.gauge';

// create gauges
var myRadialGauge = new gauge.RadialGauge('#myRadialGauge', {
  	min: 0,
    max: 100,
    value: 75,
    showText: 'None',
    valueChanged: function(s, e) {
      valueCtl.value = s.value;
    }
});
```