{/* Do not edit this file. It is automatically generated by API Documenter. */}


## BarCellRenderer

A renderer that displays the value of a numeric column cell as a bar.

**Signature:**

```typescript
export interface BarCellRenderer extends CellRenderer
```
**Extends:** [CellRenderer](/refs/Interface/CellRenderer)

## Remarks

\[Superclass\]

[CellRenderer](/refs/Interface/CellRenderer)

## Example


```js
//string type
column.renderer = 'bar';

//object type
column.renderer = {
      "type": "bar",
      "minimum": 0;
      "maximum": 100;
      "minWidth": 150;
      "showLabel": true,
      "origin": "left"
}
```

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [absoluteValue](/refs/Interface/BarCellRenderer#absolutevalue) | boolean | Whether to render based on absolute value |
| [barStyle](/refs/Interface/BarCellRenderer#barstyle) | string | Style name for the bar starting from the left |
| [barWidth](/refs/Interface/BarCellRenderer#barwidth) | number \| string | Width of bar |
| [baseValue](/refs/Interface/BarCellRenderer#basevalue) | number | If the value is specified, values larger than middleValue are displayed on the right and values smaller than middleValue are displayed on the left. |
| [bottomBarStyle](/refs/Interface/BarCellRenderer#bottombarstyle) | string | Style name for the bar starting at the bottom |
| [maximum](/refs/Interface/BarCellRenderer#maximum) | number | maximum value |
| [minimum](/refs/Interface/BarCellRenderer#minimum) | number | Minimum value |
| [negativeStyle](/refs/Interface/BarCellRenderer#negativestyle) | string | Style name applied when the value is smaller than baseValue |
| [origin](/refs/Interface/BarCellRenderer#origin) | [BarOrigin](/refs/realgrid#barorigin) | Starting position of the bar |
| [rightBarStyle](/refs/Interface/BarCellRenderer#rightbarstyle) | string | Style name for the bar starting from the right |
| [showLabel](/refs/Interface/BarCellRenderer#showlabel) | boolean | Whether to display Label |
| [textOffset](/refs/Interface/BarCellRenderer#textoffset) | number | Spacing between bar and text when baseValue is specified |
| [topBarStyle](/refs/Interface/BarCellRenderer#topbarstyle) | string | Style name for the bar starting at the top |
| [type](/refs/Interface/BarCellRenderer#type) | "bar" | Type: Bar |

## Properties Desc

### absoluteValue

Whether to render based on absolute value

`Type` - boolean

<hr/>

### barStyle

Style name for the bar starting from the left

`Type` - string

<hr/>

### barWidth

width of the bar

`Type` - number \| string

<hr/>

### baseValue

When a value is specified, values greater than middleValue are displayed on the right, and values smaller than middleValue are displayed on the left.

`Type` - number

**Remarks:**

Applies only when `origin`{/* */} is [BarOrigin.LEFT](/refs/realgrid#barorigin) or [BarOrigin.BOTTOM](/refs/realgrid#barorigin){/* */}.

<hr/>

### bottomBarStyle

Style name for the bar starting at the bottom

`Type` - string

<hr/>

### maximum

maximum value

`Type` - number

<hr/>

### minimum

minimum value

`Type` - number

<hr/>

### negativeStyle

Style name applied when the value is less than baseValue

`Type` - string

<hr/>

### origin

starting position of the bar

`Type` - [BarOrigin](/refs/realgrid#barorigin)

<hr/>

### rightBarStyle

Style name for the bar starting on the right

`Type` - string

<hr/>

### showLabel

Whether to display the label

`Type` - boolean

<hr/>

### textOffset

Spacing between bar and text when baseValue is specified

`Type` - number

**Remarks:**

If the value is `0`{/* */}, it is output in the middle of the cell.

<hr/>

### topBarStyle

Style name for the bar starting at the top

`Type` - string

<hr/>

### type

Type: Bar

`Type` - "bar"

<hr/>