chartjs-plugin-annotation

# 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,
        }
      }
    }
  }
};

# 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 Yes undefined
xMax number Yes undefined
yMin number Yes undefined
YMax number 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, 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

# 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
cornerRadius Radius of box rectangle

# 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.
color Color '#fff' Text color.
content string|Image (opens new window) null The content to show in the label.
cornerRadius number 6 Radius of label box in pixels.
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
xPadding number 6 Padding of label to add left/right.
yPadding number 6 Padding of label to add top/bottom.
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.
position string 'center' Anchor position of label on line. Possible options are: 'start', 'center', 'end'.
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. Could be set in pixel by a number, or in percentage of current width of image by a string. If undefined, uses the width of the image. It is used only when the content is an image.
height number|string undefined Overrides the height of the image. Could be set in pixel by a number, or in percentage of current height of image by a string. If undefined, uses the height of the image. It is used only when the content is an image.
rotation number|'auto' 0 Rotation of label, in degrees, or 'auto' to use the degrees of the line

← Point Annotations →