# Annotations: lines and bands

> Target lines, averages and shaded periods.

Source: https://82chart.com/en/docs/annotations/

`annotations` draws target lines (`y`), lines at an x value (`x`) and shaded periods or value ranges (`bands`). Lines sit on top of the data, bands underneath. A y line is included in the axis range so it is always visible.

```js
createChart('#chart', {
  type: 'line',
  title: 'Daily sales',
  prefix: '$',
  annotations: {
    y: [{ value: 3000, label: 'Target $3k', color: '#1baf7a' }],
    x: [{ value: 'Oct 16', label: 'App update' }],
    bands: [{ from: 'Oct 18', to: 'Oct 20', label: 'Weekend sale' }],
  },
  data: {
    labels: ['Oct 14', 'Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'],
    series: [{ name: 'Sales', data: [2410, 2650, 2580, 2990, 3420, 3610, 3380, 2870] }],
  },
});
```

| Property | What it does |
| --- | --- |
| `y: [{ value, label?, color?, dashed? }]` | Horizontal reference line; dashed by default, `dashed: false` for solid |
| `x: [{ value, label?, color?, dashed? }]` | Vertical line; `value` is a label, date or number matching the x axis |
| `bands: [{ from, to, label?, color?, axis? }]` | Shading; `axis` defaults to `'x'` (a period), `'y'` shades a value range |