+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "Gauge"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++

## Gauge class

<b>Signature</b>

```typescript
export declare class Gauge extends PureComponent<Props> 
```
<b>Import</b>

```typescript
import { Gauge } from '@grafana/ui';
```
<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [canvasElement](#canvaselement-property) |  | <code>any</code> |  |
|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>Partial&lt;Props&gt;</code> |  |
|  [renderVisualization](#rendervisualization-property) |  | <code>() =&gt; JSX.Element</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [componentDidMount()](#componentdidmount-method) |  |  |
|  [componentDidUpdate()](#componentdidupdate-method) |  |  |
|  [draw()](#draw-method) |  |  |
|  [getFontScale(length)](#getfontscale-method) |  |  |
|  [getFormattedThresholds()](#getformattedthresholds-method) |  |  |
|  [render()](#render-method) |  |  |

### canvasElement property

<b>Signature</b>

```typescript
canvasElement: any;
```

### defaultProps property

<b>Signature</b>

```typescript
static defaultProps: Partial<Props>;
```

### renderVisualization property

<b>Signature</b>

```typescript
renderVisualization: () => JSX.Element;
```

### componentDidMount method

<b>Signature</b>

```typescript
componentDidMount(): void;
```
<b>Returns:</b>

`void`

### componentDidUpdate method

<b>Signature</b>

```typescript
componentDidUpdate(): void;
```
<b>Returns:</b>

`void`

### draw method

<b>Signature</b>

```typescript
draw(): void;
```
<b>Returns:</b>

`void`

### getFontScale method

<b>Signature</b>

```typescript
getFontScale(length: number): number;
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  length | <code>number</code> |  |

<b>Returns:</b>

`number`

### getFormattedThresholds method

<b>Signature</b>

```typescript
getFormattedThresholds(): Threshold[];
```
<b>Returns:</b>

`Threshold[]`

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`