point.md

Point Annotations

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

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

/* <block:config:1> */
const config = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options
};
/* </block:config> */

module.exports = {
  config
};

Configuration

The following options are available for point 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'
pointStyle	PointStyle	Yes	'circle'
radius	number	Yes	10
rotation	number	Yes	0
shadowBlur	number	Yes	0
shadowOffsetX	number	Yes	0
shadowOffsetY	number	Yes	0
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
yMax	number | string	Yes	undefined
yMin	number | string	Yes	undefined
yScaleID	string	Yes	'y'
yValue	number | string	Yes	undefined

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.

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
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.
radius	Size of the point in pixels.
rotation	Rotation of point, in degrees.
xAdjust	Adjustment along x-axis (left-right) of point relative to computed position. Negative values move the point 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 point in units along the x axis.
yAdjust	Adjustment along y-axis (top-bottom) of point relative to computed position. Negative values move the point 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 point in units along the y axis.

Styling

Name	Description
backgroundColor	Fill color.
backgroundShadowColor	The color of shadow. See MDN.
borderColor	Stroke color.
borderDash	Length and spacing of dashes. See MDN.
borderDashOffset	Offset for line dashes. See MDN.
borderShadowColor	The color of border shadow. See MDN.
borderWidth	Stroke width.
pointStyle	Style of the point.
shadowBlur	The amount of blur applied to shadow. See MDN.
shadowOffsetX	The distance that shadow will be offset horizontally. See MDN.
shadowOffsetY	The distance that shadow will be offset vertically. See MDN.