1. [Overview](https://developers.google.com/chart/interactive/docs/overlays#overview)
2. [A Simple Example](https://developers.google.com/chart/interactive/docs/overlays#simple)
3. [Positioning Overlays Relative to Data](https://developers.google.com/chart/interactive/docs/overlays#positioning)
## Overview
An *overlay* is an area laid on top of a Google Chart. It's
typically used to call out a particular statistic, but can be anything
you want since it's just HTML and CSS.
Simple uses involve creating a CSS class and simply referring to it
in your HTML; no JavaScript required. More advanced uses can involve
using Google Charts to customize the positioning and content of the
overlay.
## A Simple Example
For our first example, we'll avoid JavaScript entirely and simply
overlay some text on a line chart:
Here, an internal stylesheet defines two classes that we
call `chartWithOverlay` and `overlay`. Note that
we use relative positioning in `chartWithOverlay` and
absolute positioning in `overlay`.
Then, in the body of our web page, we use
a `chartWithOverlay` as a container into which we place our
chart (`line-chart`) and then our `overlay`.
CSS
```css
.chartWithOverlay {
position: relative;
width: 700px;
}
.overlay {
width: 200px;
height: 200px;
position: absolute;
top: 60px; /* chartArea top */
left: 180px; /* chartArea left */
}
```
Divs
```html
```
JavaScript
```javascript
```
Full page
```html
```
## Positioning Overlays
Relative to Data
Sometimes the best position for an overlay depends on where the
data ends up on the chart. For instance, we might want to place an
image close to a data element.
Let's say we wanted to draw attention to the number of zombie
attacks in the chart above. We'll do this by placing a scary zombie
head at the end of the line.
One way to do this would be to render the chart and hardcode our
coordinates. That will work, but would require updating whenever the
chart data changes. A more robust solution would have us placing the
overlay relative to wherever the data element ends up onscreen. Since
we can't know where that will be until the chart has finished
rendering, we'll listen for the `ready` event (called when
the chart is done rendering) and access the coordinates
programmatically with `getXLocation`
and `getYLocation`:
CSS
```css
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
width: 200px;
height: 200px;
position: absolute;
top: 50px; /* chartArea top */
left: 200px; /* chartArea left */
}
.overlay-marker {
width: 50px;
height: 50px;
position: absolute;
top: 53px; /* chartArea top */
left: 528px; /* chartArea left */
}
```
Divs
```html
```
JavaScript
```javascript
```
Full page
```html
```