# Polygin Annotations

Polygin annotations are used to mark whatever polygon (for instance triangle, square or pentagon) on the chart area. This can be useful for highlighting values that are of interest.

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        pentagon: {
          type: 'polygon',
          xValue: 1,
          yValue: 60,
          sides: 5,
          radius: 60,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        pentagon: {
          type: 'polygon',
          xValue: 1,
          yValue: 60,
          sides: 5,
          radius: 60,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};

# Configuration

The following options are available for polygon annotations.

Name	Type	Scriptable	Default
`adjustScaleRange`	`boolean`	Yes	`true`
`backgroundColor`	`Color`	Yes	`options.color`
`borderCapStyle`	`string`	Yes	`'butt'`
`borderColor`	`Color`	Yes	`options.color`
`borderDash`	`number[]`	Yes	`[]`
`borderDashOffset`	`number`	Yes	`0`
`borderJoinStyle`	`string`	Yes	`'miter'`
`borderWidth`	`number`	Yes	`1`
`display`	`boolean`	Yes	`true`
`drawTime`	`string`	Yes	`'afterDatasetsDraw'`
`radius`	`number`	Yes	`10`
`rotation`	`number`	Yes	`0`
`sides`	`number`	Yes	`3`
`xAdjust`	`number`	Yes	`0`
`xMax`	`number` \| `string`	Yes	`undefined`
`xMin`	`number` \| `string`	Yes	`undefined`
`xScaleID`	`string`	Yes	`'x'`
`xValue`	`number` \| `string`	Yes	`undefined`
`yAdjust`	`number`	Yes	`0`
`yScaleID`	`string`	Yes	`'y'`
`yMax`	`number` \| `string`	Yes	`undefined`
`yMin`	`number` \| `string`	Yes	`undefined`
`yValue`	`number` \| `string`	Yes	`undefined`

# General

If one of the axes does not match an axis in the chart, the polygon annotation will take the center of the chart as point. The 2 coordinates, xValue, yValue are optional. If not specified, the polygon annotation will take the center of the chart.

The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the box is expanded out to the edges in the respective direction and the box size is used to calculated the center of the point. To enable to use the box positioning, the radius must be set to 0 or NaN.

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.
`radius`	Size of the polygon in pixels.
`rotation`	Rotation of polygon, in degrees.
`sides`	Amount of sides of polygon.
`xAdjust`	Adjustment along x-axis (left-right) of polygon relative to computed position. Negative values move the polygon left, positive right.
`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, default is 'x'.
`xValue`	X coordinate of the polygon in units along the x axis.
`yAdjust`	Adjustment along y-axis (top-bottom) of polygon relative to computed position. Negative values move the polygon up, positive down.
`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, default is 'y'.
`yValue`	Y coordinate of the polygon in units along the y axis.

# Styling

Name	Description
`backgroundColor`	Fill color
`borderColor`	Stroke color
`borderCapStyle`	Cap style of the border of polygon. See MDN (opens new window).
`borderDash`	Length and spacing of dashes. See MDN (opens new window).
`borderDashOffset`	Offset for line dashes. See MDN (opens new window).
`borderJoinStyle`	Border line joint style. See MDN (opens new window).
`borderWidth`	Stroke width

← Point Annotations