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
};
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 |
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. |
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. |