# Showing Text On Gauge

Learn how to show text on Wijmo gauge components in this documentation topic

## Content

Use the __showText__ property to show the min/max/value properties as text on the gauge. Options include:

* __None__: Do not show any text in the gauge.
* __Value__: Show the gauge's value as text. For radial gauges the value is displayed in the center. For linear gauges the value is displayed in the thumb.
* __MinMax__: Show the gauge's min and max values as text.
* __All__: Show the gauge's value, min, and max as text.

The default value is ShowText.All for RadialGauge controls, and to ShowText.None for LinearGauge and BulletGraph controls.

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

var myRadialGauge = new gauge.RadialGauge('#myRadialGauge');
myRadialGauge.showText = 'All';
```

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

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

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

## Formatting the Gauge Text
Use the __format__ property to set the format string used to convert numeric values into strings. The format applies to all visible text.

Example:
```JavaScript
myRadialGauge.format = 'n0';
```

## Customizing the Gauge Text
Use the __getText__ callback function to provide custom strings. Use the 'part' parameter to determine which text part to customize (value, min, max).

The following example displays the value text as 'Good', 'Low...' or 'Empty'.

```JavaScript
myRadialGauge.getText = getTextCallback;

// getText callback function
function getTextCallback (gauge, part, value, text) {
    switch (part) {
        case 'value':
	      if (value <= 10) return 'Empty!';
	      if (value <= 25) return 'Low...';
	      if (value <= 95) return 'Good';
	      return 'Full';
	    case 'min':
	      return 'empty';
	    case 'max':
	      return 'full';
	}
	return text;
}
```

![Gauge Custom Text](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/gauge/gauge-custom-text.png)