chartjs-plugin-annotation

# 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)'
        }
      }
    }
  }
};

# Configuration

# Box annotation specific options

The following options are available for box annotations.

Name Type Scriptable Default
backgroundShadowColor Color Yes 'transparent'
borderCapStyle string Yes 'butt'
borderJoinStyle string Yes 'miter'
borderRadius number | object Yes 0
borderWidth number Yes 1
label object Yes
rotation number Yes 0

# Common options to all annotations

The following options are available for all annotations.

Name Type Scriptable Default
adjustScaleRange boolean Yes true
backgroundColor Color Yes options.color
borderColor Color Yes options.color
borderDash number[] Yes []
borderDashOffset number Yes 0
borderShadowColor Color Yes 'transparent'
display boolean Yes true
drawTime string Yes 'afterDatasetsDraw'
shadowBlur number Yes 0
shadowOffsetX number Yes 0
shadowOffsetY number Yes 0
xMax number | string Yes undefined
xMin number | string Yes undefined
xScaleID string Yes undefined
yMin number | string Yes undefined
yMax number | string Yes undefined
yScaleID string Yes undefined
z number 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
adjustScaleRange Should the scale range be adjusted if this annotation is out of range.
display Whether or not this annotation is visible.
drawTime See drawTime.
rotation Rotation of the box in degrees.
xMax Right edge of the box in units along the x axis.
xMin Left edge of the box in units along the x axis.
xScaleID ID of the X scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as 'x' axis. If more than one scale has been defined in the chart as 'x' axis, the option is mandatory to select the right scale.
yMax Bottom edge of the box in units along the y axis.
yMin Top edge of the box in units along the y axis.
yScaleID ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as 'y' axis. If more than one scale has been defined in the chart as 'y' axis, the option is mandatory to select the right scale.
z The z property determines the drawing stack level of the box annotation element. All visible elements will be drawn in ascending order of z option, with the same drawTime option.

# Styling

Name Description
backgroundColor Fill color.
backgroundShadowColor The color of shadow. See MDN (opens new window).
borderCapStyle Cap style of the border line. See MDN (opens new window).
borderColor Stroke color.
borderDash Length and spacing of dashes. See MDN (opens new window).
borderDashOffset Offset for border line dashes. See MDN (opens new window).
borderJoinStyle Border line join style. See MDN (opens new window).
borderRadius Radius of box rectangle (in pixels).
borderShadowColor The color of the border shadow. See MDN (opens new window).
borderWidth Border line width (in pixels).
shadowBlur The amount of blur applied to shadow. See MDN (opens new window).
shadowOffsetX The distance that shadow will be offset horizontally. See MDN (opens new window).
shadowOffsetY The distance that shadow will be offset vertically. See MDN (opens new window).

# 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

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

All of these options can be Scriptable

Name Type Default Notes
color Color 'black' Text color.
content string|string[]|Image (opens new window)|HTMLCanvasElement (opens new window) null The content to show in the label.
display boolean false Whether or not the label is shown.
drawTime string options.drawTime See drawTime. Defaults to the box annotation draw time if unset
font Font { weight: '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.
position string|{x: string, y: string} 'center' Anchor position of label in the box.
rotation number undefined Rotation of label, in degrees. If undefined, the box rotation is used.
textAlign string 'start' Text alignment of label content when there's more than one line. Possible options are: 'left', 'start', 'center', 'end', 'right'.
textStrokeColor Color undefined The color of the stroke around the text.
textStrokeWidth number 0 Stroke width around the text.
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.
z number 0 It determines the drawing stack level of the label element, with same drawTime.

# Position

A position can be set in 2 different values types:

  1. 'start', 'center', 'end' which are defining where the label will be located
  2. a string, in percentage format 'number%', is representing the percentage on the size where the label will be located

If this value is a string (possible options are 'start', 'center', 'end' or a string in percentage format), it is applied to vertical and horizontal position in the box.

If this value is an object, the x property defines the horizontal alignment in the box. Similarly, the y property defines the vertical alignment in the box. Possible options for both properties are 'start', 'center', 'end', a string in percentage format. Omitted property have value of the default, 'center'.

# Element

The following diagram is showing the element properties about a 'box' annotation:

box

The label of a box annotation is described as a label annotation and accessible by element.label.

← Ellipse Annotations →