# Area glyphs#

## Rectangles#

### Bars#

To draw axis aligned rectangles by specifying the `left`, `right`, `top`, and `bottom` positions, use the `quad()` glyph function:

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.quad(top=[2, 3, 4], bottom=[1, 2, 3], left=[1, 2, 3],
right=[1.2, 2.5, 3.7], color="#B3DE69")

show(p)
```

### Blocks#

To draw axis aligned rectangles by specifying the `x` and `y` coordinates for a corner, and a `width` and `height`, use the `block()` glyph function:

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.block(x=[1, 2, 3], y=[1, 2, 3], width=[0.2, 0.5, 0.1], height=1.5)

show(p)
```

### Rotatable#

To draw arbitrary rectangles by specifying center coordinates, `width`, `height`, and `angle`, use the `rect()` glyph function:

```from math import pi

from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.rect(x=[1, 2, 3], y=[1, 2, 3], width=0.2, height=40, color="#CAB2D6",
angle=pi/3, height_units="screen")

show(p)
```

## Directed areas#

Directed areas are filled regions between two series that share a common index. For instance, a vertical directed area has one `x` coordinate array and two `y` coordinate arrays, `y1` and `y2`, defining the space for Bokeh to fill.

### Single areas#

To fill an area in vertical direction, use the `varea()` method. You can do the same in horizontal direction with `harea()`.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)

p.varea(x=[1, 2, 3, 4, 5],
y1=[2, 6, 4, 3, 5],
y2=[1, 4, 2, 2, 3])

show(p)
```

### Stacked areas#

To stack directed areas, use the `varea_stack()` and `harea_stack()` convenience methods.

```from bokeh.models import ColumnDataSource
from bokeh.plotting import figure, show

source = ColumnDataSource(data=dict(
x=[1, 2, 3, 4, 5],
y1=[1, 2, 4, 3, 4],
y2=[1, 4, 2, 2, 3],
))
p = figure(width=400, height=400)

p.varea_stack(['y1', 'y2'], x='x', color=("grey", "lightgrey"), source=source)

show(p)
```

## Patches#

### Single patches#

The following example generates a single polygonal patch from one-dimensional sequences of `x` and `y` points using the `patch()` glyph method:

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)

# add a patch renderer with an alpha and line width
p.patch([1, 2, 3, 4, 5], [6, 7, 8, 7, 3], alpha=0.5, line_width=2)

show(p)
```

### Multiple patches#

To plot several polygonal patches, use the `patches()` glyph method:

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)

p.patches([[1, 3, 2], [3, 4, 6, 6]], [[2, 1, 4], [4, 7, 8, 5]],
color=["firebrick", "navy"], alpha=[0.8, 0.3], line_width=2)

show(p)
```

Note

Unlike many other glyph methods, `patches()` accepts a list of lists of `x` and `y` positions for each line. The `patches()` method also expects a scalar value or a list of scalars for each patch for parameters such as color, alpha, and line width. You can similarly use a `ColumnDataSource` consisting of a list of lists of point coordinates and a list of scalar values of matching length.

### Missing points#

Just as with the `line()` and `multi_line()` methods, you can pass `NaN` values to `patch()` and `patches()` glyphs. This produces disjointed patches with gaps for `NaN` values.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)

# add a patch renderer with a NaN value
nan = float('nan')
p.patch([1, 2, 3, nan, 4, 5, 6], [6, 7, 5, nan, 7, 3, 6], alpha=0.5, line_width=2)

show(p)
```

Warning

Bokeh doesn’t currently support hit testing on patch objects with `NaN` values.

## Polygons#

The `multi_polygons()` glyph uses nesting to accept a variety of information relevant to polygons. The method duplicates the functionality of `patches()` but you can also use it to render holes inside polygons.

Note

Unlike many other glyph methods, `multi_polygons()` accepts a triple-nested lists of `x` and `y` positions for the exterior and holes composing each polygon. The `multi_polygons()` method also expects a scalar value or a list of scalars for each item for parameters such as color, alpha, and line width. You can similarly use a `ColumnDataSource` consisting of a triple- nested list of point coordinates and a list of scalars, with the top-level list of point coordinates being of equal length with the list of scalars.

### Simple polygon#

The following example generates a single polygon from a triple-nested list of one-dimensional sequences of `x` and `y` points using the `multi_polygons()` glyph method.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.multi_polygons(xs=[[[[1, 1, 2, 2]]]],
ys=[[[[3, 4, 4, 3]]]])

show(p)
```

### Polygon with holes#

The following example generates a single polygon with holes from three sequences of `x` and `y` points. The first sequence represents the exterior of the polygon and the following sequences represent the holes.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.multi_polygons(xs=[[[ [1, 2, 2, 1], [1.2, 1.6, 1.6], [1.8, 1.8, 1.6] ]]],
ys=[[[ [3, 3, 4, 4], [3.2, 3.6, 3.2], [3.4, 3.8, 3.8] ]]])

show(p)
```

### Multi-polygon with separate parts#

A single polygon concept can comprise multiple polygon geometries. The following example generates a multi-polygon glyph from several sequences of `x` and `y` points. Each item in the sequence represents a part of the glyph.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.multi_polygons(xs=[[[ [1, 1, 2, 2], [1.2, 1.6, 1.6], [1.8, 1.8, 1.6] ], [ [3, 4, 3] ]]],
ys=[[[ [4, 3, 3, 4], [3.2, 3.2, 3.6], [3.4, 3.8, 3.8] ], [ [1, 1, 3] ]]])

show(p)
```

### Multiple multi-polygons#

The top-level of nesting separates each multi-polygon from the rest. You can think of each multi-polygon as a row in the data source, potentially with a corresponding label or color.

```from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.multi_polygons(
xs=[
[[ [1, 1, 2, 2], [1.2, 1.6, 1.6], [1.8, 1.8, 1.6] ], [ [3, 3, 4] ]],
[[ [1, 2, 2, 1], [1.3, 1.3, 1.7, 1.7] ]]],
ys=[
[[ [4, 3, 3, 4], [3.2, 3.2, 3.6], [3.4, 3.8, 3.8] ], [ [1, 3, 1] ]],
[[ [1, 1, 2, 2], [1.3, 1.7, 1.7, 1.3] ]]],
color=['blue', 'red'])

show(p)
```

## Ellipses#

The `ellipse()` glyph method accepts the same properties as `rect()`, but renders ellipse shapes.

```from math import pi

from bokeh.plotting import figure, show

p = figure(width=400, height=400)
p.ellipse(x=[1, 2, 3], y=[1, 2, 3], width=[0.2, 0.3, 0.1], height=0.3,
angle=pi/3, color="#CAB2D6")

show(p)
```