# Line Annotations

Line annotations are used to draw lines on the chart area. This can be useful for highlighting information such as a threshold.

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      }
    }
  }
};const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      }
    }
  }
};

# Configuration

The following options are available for line annotations. All of these options can be .

Name	Type	Scriptable	Default
`display`	`boolean`	Yes	`true`
`adjustScaleRange`	`boolean`	Yes	`true`
`drawTime`	`string`	Yes	`'afterDatasetsDraw'`
`scaleID`	`string`	Yes	`undefined`
`value`	`number`	Yes	`undefined`
`endValue`	`number`	Yes	`undefined`
`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`
`label`	`object`	Yes

# General

If one of the axes does not match an axis in the chart and the line behaviors are the following, depending how the line should be drawn:

if scaleId is not resolved, the line will take the entire chart dimension, starting top-left vertex to bottom-right vertex of the chart
if xScaleId is not resolved, the line will take the entire chart width
if yScaleId is not resolved, the line will take the entire chart height

The 2 coordinates, start, end, are optional. If not specified, the line is expanded out to the edges in the respective direction. The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the line 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

# Positioning

The line can be positioned in two different ways. If scaleID is set, then value and endValue must also be set to indicate the endpoints of the line. The line will be perpendicular to the axis identified by scaleID.

If scaleID is unset, then xScaleID and yScaleID are used to draw a line from (xMin, yMin) to (xMax, yMax).

Name	Description
`scaleID`	ID of the scale in single scale mode. If unset, `xScaleID` and `yScaleID` are used.
`value`	End one of the line when a single scale is specified.
`endValue`	End two of the line when a single scale is specified.
`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`	X coordinate of end one of the line in units along the x axis.
`xMax`	X coordinate of end two of the line in units along the x axis.
`yMin`	Y coordinate of end one of the line in units along the y axis.
`yMax`	Y coordinate of end two of the line 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

# Label

Namespace: options.annotations[annotationID].label, it defines options for the line annotation label.

All of these options can be Scriptable

Name	Type	Default	Notes
`backgroundColor`	`Color`	`'rgba(0,0,0,0.8)'`	Background color of the label container.
`borderCapStyle`	`string`	`'butt'`	Cap style of the border line. See MDN (opens new window).
`borderColor`	`Color`	`black`	The border line color.
`borderDash`	`number[]`	`[]`	Length and spacing of dashes. See MDN (opens new window).
`borderDashOffset`	`number`	`0`	Offset for border line dashes. See MDN (opens new window).
`borderJoinStyle`	`string`	`'miter'`	Border line joint style. See MDN (opens new window).
`borderRadius`	`number` \| `object`	`6`	Radius of label box corners in pixels.
`borderWidth`	`number`	`0`	The border line width (in pixels).
`color`	`Color`	`'#fff'`	Text color.
`content`	`string`\|`string[]`\|`Image` (opens new window)\|`HTMLCanvasElement` (opens new window)	`null`	The content to show in the label.
`drawTime`	`string`	`options.drawTime`	See drawTime. Defaults to the line annotation draw time if unset
`enabled`	`boolean`	`false`	Whether or not the label is shown.
`font`	`Font`	`{ style: 'bold' }`	Label font
`height`	`number`\|`string`	`undefined`	Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
`padding`	`Padding`	`6`	The padding to add around the text label.
`xPadding`	`number`	`6`	Padding of label to add left/right. This is deprecated. Use `padding`.
`yPadding`	`number`	`6`	Padding of label to add top/bottom. This is deprecated. Use `padding`.
`position`	`string`	`'center'`	Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`. It can be set by a string in percentage format `'number%'` which are representing the percentage on the width of the line where the label will be located.
`rotation`	`number`\|`'auto'`	`0`	Rotation of label, in degrees, or 'auto' to use the degrees of the line
`textAlign`	`string`	`'center'`	Text alignment of label content when there's more than one line. Possible options are: `'start'`, `'center'`, `'end'`.
`width`	`number`\|`string`	`undefined`	Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.
`xAdjust`	`number`	`0`	Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
`yAdjust`	`number`	`0`	Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.

# 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.

← Label Annotations Point Annotations →