Add point positioning by box options for point, polygon and label annotations

docs/guide/types/label.md

@@ -75,16 +75,23 @@ The following options are available for label annotations.
 | [`textAlign`](#general) | `string` | Yes | `'center'`
 | [`width`](#general) | `number`\|`string` | Yes | `undefined`
 | [`xAdjust`](#general) | `number` | Yes | `0`
+| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xScaleID`](#general) | `string` | Yes | `'x'`
 | [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yAdjust`](#general) | `number` | Yes | `0`
+| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `'y'`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
 
 ### General
 
 If one of the axes does not match an axis in the chart, the content will be rendered in the center of the chart. The 2 coordinates, xValue, yValue are optional. If not specified, the content will be rendered in 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 |
 | ---- | ---- |
 | `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range
@@ -96,9 +103,13 @@ If one of the axes does not match an axis in the chart, the content will be rend
 | `textAlign` | Text alignment of label content when there's more than one line. Possible options are: `'left'`, `'start'`, `'center'`, `'end'`, `'right'`.
 | `width` | Overrides the width of the image. Could be set in pixel by a number, or in percentage of current width of image by a string. If undefined, uses the width of the image. It is used only when the content is an image.
 | `xAdjust` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label 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 label relative to computed position. Negative values move the label 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.
 

docs/guide/types/point.md

@@ -60,24 +60,35 @@ The following options are available for point annotations.
 | [`pointStyle`](#styling) | [`PointStyle`](../options#point-style) | Yes | `'circle'`
 | [`radius`](#general) | `number` | Yes | `10`
 | [`rotation`](#general) | `number` | Yes | `0`
+| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`xScaleID`](#general) | `string` | Yes | `'x'`
 | [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `'y'`
 | [`yValue`](#general) | `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](../options#draw-time).
 | `radius` | Size of the point in pixels.
 | `rotation` | Rotation of point, in degrees.
+| `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.
+| `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.
 
@@ -90,4 +101,4 @@ If one of the axes does not match an axis in the chart, the point annotation wil
 | `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
 | `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderWidth` | Stroke width.
-| `pointStyle` | Style of the point.
+| `pointStyle` | Style of the point.

docs/guide/types/polygon.md

@@ -61,30 +61,40 @@ The following options are available for polygon annotations.
 | [`borderWidth`](#styling) | `number`| Yes | `1`
 | [`display`](#general) | `boolean` | Yes | `true`
 | [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'`
-| [`xScaleID`](#general) | `string` | Yes | `'x'`
-| [`yScaleID`](#general) | `string` | Yes | `'y'`
-| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
-| [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
 | [`radius`](#general) | `number` | Yes | `10`
 | [`rotation`](#general) | `number` | Yes | `0`
 | [`sides`](#general) | `number` | Yes | `3`
+| [`xMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`xMin`](#general) | `number` \| `string` | Yes | `undefined`
+| [`xScaleID`](#general) | `string` | Yes | `'x'`
+| [`xValue`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yScaleID`](#general) | `string` | Yes | `'y'`
+| [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
+| [`yValue`](#general) | `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](../options#draw-time).
-| `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 polygon in units along the x axis.
-| `yValue` | Y coordinate of the polygon in units along the y axis.
 | `radius` | Size of the polygon in pixels.
 | `rotation` | Rotation of polygon, in degrees.
 | `sides` | Amount of sides of polygon.
+| `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.
+| `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
 

src/helpers.js

@@ -190,8 +190,8 @@ export function drawLabel(ctx, rect, options) {
   labels.forEach((l, i) => ctx.fillText(l, x, y + (i * lh)));
 }
 
-export function getRectCenterPoint(element, useFinalPosition) {
-  const {x, y, width, height} = element.getProps(['x', 'y', 'width', 'height'], useFinalPosition);
+export function getRectCenterPoint(rect) {
+  const {x, y, width, height} = rect;
   return {
     x: x + width / 2,
     y: y + height / 2
@@ -256,7 +256,7 @@ export function inPointRange(point, center, radius) {
   return (Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2)) <= Math.pow(radius, 2);
 }
 
-export function getCircleCenterPoint(element, useFinalPosition) {
+export function getElementCenterPoint(element, useFinalPosition) {
   const {x, y} = element.getProps(['x', 'y'], useFinalPosition);
   return {x, y};
 }
@@ -270,3 +270,26 @@ export function getChartCircle(chart, options) {
     height: options.radius * 2
   };
 }
+
+export function isBoundToPoint(options) {
+  return options && (options.xValue || options.yValue);
+}
+
+export function resolvePointPosition(chart, options) {
+  if (!isBoundToPoint(options)) {
+    const box = getChartRect(chart, options);
+    const point = getRectCenterPoint(box);
+    let radius = options.radius;
+    if (!radius || isNaN(radius)) {
+      radius = Math.min(box.width, box.height) / 2;
+      options.radius = radius;
+    }
+    return {
+      x: point.x,
+      y: point.y,
+      width: radius * 2,
+      height: radius * 2
+    };
+  }
+  return getChartCircle(chart, options);
+}

src/types/box.js

@@ -13,7 +13,7 @@ export default class BoxAnnotation extends Element {
   }
 
   getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this, useFinalPosition);
+    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   draw(ctx) {
@@ -63,12 +63,12 @@ BoxAnnotation.defaults = {
   cornerRadius: undefined, // TODO: v2 remove support for cornerRadius
   borderWidth: 1,
   display: true,
-  xScaleID: 'x',
-  xMin: undefined,
   xMax: undefined,
-  yScaleID: 'y',
-  yMin: undefined,
+  xMin: undefined,
+  xScaleID: 'x',
   yMax: undefined,
+  yMin: undefined,
+  yScaleID: 'y',
   label: {
     color: 'black',
     content: null,

src/types/ellipse.js

@@ -9,7 +9,7 @@ export default class EllipseAnnotation extends Element {
   }
 
   getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this, useFinalPosition);
+    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   draw(ctx) {

src/types/label.js

@@ -1,4 +1,4 @@
-import {drawBox, drawLabel, drawPoint, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inPointRange} from '../helpers';
+import {drawBox, drawLabel, drawPoint, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inPointRange, isBoundToPoint, getChartRect} from '../helpers';
 import {color as getColor, toPadding} from 'chart.js/helpers';
 import {Element} from 'chart.js';
 
@@ -13,10 +13,8 @@ export default class LabelAnnotation extends Element {
       const adjust = gap || 0;
       const {x, y, width, height} = this.isBoxVisible() ? this.getProps(['x', 'y', 'width', 'height']) : this.labelRect;
 
-      return mouseX >= x + adjust &&
-             mouseX <= x + width - adjust &&
-             mouseY >= y + adjust &&
-             mouseY <= y + height - adjust;
+      return mouseX >= x + adjust && mouseX <= x + width - adjust &&
+             mouseY >= y + adjust && mouseY <= y + height - adjust;
     }
     return false;
   }
@@ -35,7 +33,7 @@ export default class LabelAnnotation extends Element {
   }
 
   getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this, useFinalPosition);
+    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   draw(ctx) {
@@ -48,7 +46,7 @@ export default class LabelAnnotation extends Element {
   }
 
   resolveElementProperties(chart, options) {
-    this.point = getChartPoint(chart, options);
+    this.point = !isBoundToPoint(options) ? getRectCenterPoint(getChartRect(chart, options)) : getChartPoint(chart, options);
 
     if (isLabelVisible(options)) {
       const padding = toPadding(options.padding);
@@ -119,9 +117,13 @@ LabelAnnotation.defaults = {
   textAlign: 'center',
   width: undefined,
   xAdjust: 0,
+  xMax: undefined,
+  xMin: undefined,
   xScaleID: 'x',
   xValue: undefined,
   yAdjust: 0,
+  yMax: undefined,
+  yMin: undefined,
   yScaleID: 'y',
   yValue: undefined
 };

src/types/point.js

@@ -1,5 +1,5 @@
 import {Element} from 'chart.js';
-import {drawPoint, inPointRange, getChartCircle, getCircleCenterPoint} from '../helpers';
+import {drawPoint, inPointRange, getElementCenterPoint, resolvePointPosition} from '../helpers';
 
 export default class PointAnnotation extends Element {
 
@@ -9,15 +9,15 @@ export default class PointAnnotation extends Element {
   }
 
   getCenterPoint(useFinalPosition) {
-    return getCircleCenterPoint(this, useFinalPosition);
+    return getElementCenterPoint(this, useFinalPosition);
   }
 
   draw(ctx) {
     drawPoint(ctx, this, this.options);
   }
 
   resolveElementProperties(chart, options) {
-    return getChartCircle(chart, options);
+    return resolvePointPosition(chart, options);
   }
 }
 
@@ -32,8 +32,12 @@ PointAnnotation.defaults = {
   pointStyle: 'circle',
   radius: 10,
   rotation: 0,
+  xMax: undefined,
+  xMin: undefined,
   xScaleID: 'x',
   xValue: undefined,
+  yMax: undefined,
+  yMin: undefined,
   yScaleID: 'y',
   yValue: undefined
 };

src/types/polygon.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {PI, RAD_PER_DEG} from 'chart.js/helpers';
-import {setBorderStyle, getCircleCenterPoint, getChartCircle} from '../helpers';
+import {setBorderStyle, resolvePointPosition, getElementCenterPoint} from '../helpers';
 
 export default class PolygonAnnotation extends Element {
 
@@ -9,7 +9,7 @@ export default class PolygonAnnotation extends Element {
   }
 
   getCenterPoint(useFinalPosition) {
-    return getCircleCenterPoint(this, useFinalPosition);
+    return getElementCenterPoint(this, useFinalPosition);
   }
 
   draw(ctx) {
@@ -40,7 +40,7 @@ export default class PolygonAnnotation extends Element {
   }
 
   resolveElementProperties(chart, options) {
-    return getChartCircle(chart, options);
+    return resolvePointPosition(chart, options);
   }
 
 }
@@ -58,8 +58,12 @@ PolygonAnnotation.defaults = {
   radius: 10,
   rotation: 0,
   sides: 3,
+  xMax: undefined,
+  xMin: undefined,
   xScaleID: 'x',
   xValue: undefined,
+  yMax: undefined,
+  yMin: undefined,
   yScaleID: 'y',
   yValue: undefined
 };