# Box Annotations

Box annotations are used to draw rectangles on the chart area. This can be useful for highlighting different areas of a chart.

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        box1: {
          type: 'box',
          xMin: 1,
          xMax: 2,
          yMin: 50,
          yMax: 70,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        box1: {
          type: 'box',
          xMin: 1,
          xMax: 2,
          yMin: 50,
          yMax: 70,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};

# Configuration

The following options are available for box annotations.

Name	Type	Scriptable	Default
`display`	`boolean`	Yes	`true`
`adjustScaleRange`	`boolean`	Yes	`true`
`drawTime`	`string`	Yes	`'afterDatasetsDraw'`
`xScaleID`	`string`	Yes	`'x'`
`yScaleID`	`string`	Yes	`'y'`
`xMin`	`number` \| `string`	Yes	`undefined`
`xMax`	`number` \| `string`	Yes	`undefined`
`yMin`	`number` \| `string`	Yes	`undefined`
`yMax`	`number` \| `string`	Yes	`undefined`
`borderColor`	`Color`	Yes	`options.color`
`borderWidth`	`number`	Yes	`1`
`borderDash`	`number[]`	Yes	`[]`
`borderDashOffset`	`number`	Yes	`0`
`backgroundColor`	`Color`	Yes	`options.color`
`borderRadius`	`number` \| `object`	Yes	`0`

# General

If one of the axes does not match an axis in the chart, the box will take the entire chart dimension. The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the box is expanded out to the edges in the respective direction.

Name	Description
`display`	Whether or not this annotation is visible
`adjustScaleRange`	Should the scale range be adjusted if this annotation is out of range
`drawTime`	See drawTime
`xScaleID`	ID of the X scale to bind onto, default is 'x'.
`yScaleID`	ID of the Y scale to bind onto, default is 'y'.
`xMin`	Left edge of the box in units along the x axis.
`xMax`	Right edge of the box in units along the x axis.
`yMin`	Top edge of the box in units along the y axis.
`yMax`	Bottom edge of the box in units along the y axis.

# Styling

Name	Description
`borderColor`	Stroke color
`borderWidth`	Stroke width
`borderDash`	Length and spacing of dashes. See MDN (opens new window).
`borderDashOffset`	Offset for line dashes. See MDN (opens new window).
`backgroundColor`	Fill color
`borderRadius`	Radius of box rectangle (in pixels)

# borderRadius

If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight). If this value is an object, the topLeft property defines the top-left corners border radius. Similarly, the topRight, bottomLeft, and bottomRight properties can also be specified. Omitted corners have radius of 0.

← Interactions Ellipse Annotations →