chartjs-plugin-annotation

# Ellipse Annotations

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

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

# Configuration

The following options are available for ellipse annotations.

Name Type Scriptable Default
adjustScaleRange boolean Yes true
backgroundColor Color Yes options.color
backgroundShadowColor Color Yes 'transparent'
borderColor Color Yes options.color
borderDash number[] Yes []
borderDashOffset number Yes 0
borderShadowColor Color Yes 'transparent'
borderWidth number Yes 1
display boolean Yes true
drawTime string Yes 'afterDatasetsDraw'
rotation number Yes 0
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 'x'
yMax number | string Yes undefined
yMin number | string Yes undefined
yScaleID string Yes 'y'

# General

If one of the axes does not match an axis in the chart, the ellipse will take the entire chart dimension. The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the ellipse 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 Rotatation of the ellipse in degrees, default is 0.
xMax Right edge of the ellipse in units along the x axis.
xMin Left edge of the ellipse in units along the x axis.
xScaleID ID of the X scale to bind onto, default is 'x'.
yMax Bottom edge of the ellipse in units along the y axis.
yMin Top edge of the ellipse in units along the y axis.
yScaleID ID of the Y scale to bind onto, default is 'y'.

# Styling

Name Description
backgroundColor Fill color.
backgroundShadowColor The color of shadow. See MDN (opens new window).
borderColor Stroke color.
borderDash Length and spacing of dashes. See MDN (opens new window).
borderDashOffset Offset for line dashes. See MDN (opens new window).
borderShadowColor The color of the border shadow. See MDN (opens new window).
borderWidth Stroke width.
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).

← Label Annotations →