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


## ShapeCellRenderer

Renderer that displays shapes included in the grid

**Signature:**

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

## Remarks

You cannot use `TOP_EDGE`{/* */} and `BOTTOM_EDGE`{/* */} in auto height.

\[Superclass\]

[CellRenderer](/refs/Interface/CellRenderer)

## Example


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

// object type
column.renderer = {
     "type": "shape",
     "shape": "diamond"
}
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [shapeCallback](/refs/Interface/ShapeCellRenderer#shapecallback) | [GetShapeCallback](/refs/realgrid#getshapecallback) | Callback to specify type of shape |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [shape](/refs/Interface/ShapeCellRenderer#shape) | string | Shape type |
| [shapeHeight](/refs/Interface/ShapeCellRenderer#shapeheight) | number | Height of shape |
| [shapeLocation](/refs/Interface/ShapeCellRenderer#shapelocation) | [IconLocation](/refs/realgrid#iconlocation) | Location of shapes |
| [shapeMap](/refs/Interface/ShapeCellRenderer#shapemap) | \{ \[cellValue: string\]: [PolygonShape](/refs/realgrid#polygonshape){/* */}; \} | Cell value - shape type pair |
| [shapeStyle](/refs/Interface/ShapeCellRenderer#shapestyle) | string | Style class name of shape |
| [shapeWidth](/refs/Interface/ShapeCellRenderer#shapewidth) | number | Width of shape |
| [type](/refs/Interface/ShapeCellRenderer#type) | 'shape' | Type: Shape |

## Events Desc

### shapeCallback

Callback to specify the type of shape

`Type` - [GetShapeCallback](/refs/realgrid#getshapecallback)

**Remarks:**

It follows the format of [GetShapeCallback](/refs/realgrid#getshapecallback).

**Example:**


```js
const f = function(grid, model) {
 if (model.value) {
 return 'ellipse';
 }
 else {
 return 'minus';
 }
}

column.renderer = {
 type: 'shape',
 shapeCallback: f
}
```

<hr/>

## Properties Desc

### shape

shape type

`Type` - string

**Remarks:**

You can set the shapes in [PolygonShape](/refs/realgrid#polygonshape).

If you want to set the circle shape, just set it to `'ellipse'`{/* */}.

Applies when `shape` or `shapeCallback` is not specified.

<hr/>

### shapeHeight

height of shape

`Type` - number

<hr/>

### shapeLocation

location of shapes

`Type` - [IconLocation](/refs/realgrid#iconlocation)

<hr/>

### shapeMap

Cell value - shape type pair

`Type` - \{ \[cellValue: string\]: [PolygonShape](/refs/realgrid#polygonshape){/* */}; \}

**Remarks:**

It takes precedence over `shape`.

Applies when `shapeCallback` is not specified.

**Example:**


```js

let sMap = {
 "value1": "triangle",
 "value2": "diamond"
}

column.renderer = {
 "type": "shape",
 "shapeMap": sMap
}
```

<hr/>

### shapeStyle

Style class name of shape

`Type` - string

<hr/>

### shapeWidth

width of shape

`Type` - number

<hr/>

### type

Type: Shape

`Type` - 'shape'

<hr/>