# Point Annotations

Point annotations are used to mark points on the chart area. This can be useful for highlighting values that are of interest.

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        point1: {
          type: 'point',
          xValue: 1,
          yValue: 60,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        point1: {
          type: 'point',
          xValue: 1,
          yValue: 60,
          backgroundColor: 'rgba(255, 99, 132, 0.25)'
        }
      }
    }
  }
};

# Configuration

The following options are available for point annotations.

Name	Type	Scriptable	Default
`display`	`boolean`	Yes	`true`
`adjustScaleRange`	`boolean`	Yes	`true`
`drawTime`	`string`	Yes	`'afterDatasetsDraw'`
`xScaleID`	`string`	Yes	`'x'`
`yScaleID`	`string`	Yes	`'y'`
`xValue`	`number` \| `string`	Yes	`undefined`
`yValue`	`number` \| `string`	Yes	`undefined`
`radius`	`number`	Yes	`10`
`borderColor`	`Color`	Yes	`options.color`
`borderWidth`	`number`	Yes	`1`
`borderDash`	`number[]`	Yes	`[]`
`borderDashOffset`	`number`	Yes	`0`
`backgroundColor`	`Color`	Yes	`options.color`

# General

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

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
`xScaleID`	ID of the X scale to bind onto, default is 'x'.
`yScaleID`	ID of the Y scale to bind onto, default is 'y'.
`xValue`	X coordinate of the point in units along the x axis.
`yValue`	Y coordinate of the point in units along the y axis.
`radius`	Size of the point in pixels

# 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

← Line Annotations