Docs › Interaction and export

Annotations: lines and bands

Target lines, averages and shaded periods.

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.

Live example

Code for this example

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