Add element diagrams to the annotation types guide (#760)

Author: stockiNail

docs/guide/types/box.md

@@ -138,3 +138,11 @@ A position can be set in 2 different values types:
 If this value is a string (possible options are `'start'`, `'center'`, `'end'` or a string in percentage format), it is applied to vertical and horizontal position in the box.
 
 If this value is an object, the `x` property defines the horizontal alignment in the box. Similarly, the `y` property defines the vertical alignment in the box. Possible options for both properties are `'start'`, `'center'`, `'end'`, a string in percentage format. Omitted property have value of the default, `'center'`.
+
+## Element
+
+The following diagram is showing the element properties about a `'box'` annotation:
+
+![box](../../img/elementBoxProps.png)
+
+The label of a box annotation is described as a [label annotation](./label#element) and accessible by `element.label`.

docs/guide/types/ellipse.md

@@ -91,3 +91,9 @@ If one of the axes does not match an axis in the chart, the ellipse will take th
 | `shadowBlur` | The amount of blur applied to shadow. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur).
 | `shadowOffsetX` | The distance that shadow will be offset horizontally. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX).
 | `shadowOffsetY` | The distance that shadow will be offset vertically. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY).
+
+## Element
+
+The following diagram is showing the element properties about a `'ellipse'` annotation:
+
+![ellipse](../../img/elementEllipseProps.png)

docs/guide/types/label.md

@@ -217,3 +217,9 @@ All of these options can be [Scriptable](../options#scriptable-options).
 | `position` | `string` | `'auto'` | The position of callout, with respect to the label. Could be `left`, `top`, `right`, `bottom` or `auto`.
 | `side` | `number` | `5` | Width of the starter line of callout pointer.
 | `start` | `number`\|`string` | `'50%'` | The percentage of the separator dimension to use as starting point for callout pointer. Could be set in pixel by a number, or in percentage of the separator dimension by a string.
+
+## Element
+
+The following diagram is showing the element properties about a `'label'` annotation:
+
+![label](../../img/elementLabelProps.png)

docs/guide/types/line.md

@@ -184,3 +184,11 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `shadowOffsetX` | `number` | `lineAnnotation.shadowOffsetX` | The distance that shadow, of the arrow head, will be offset horizontally. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX).
 | `shadowOffsetY` | `number` | `lineAnnotation.shadowOffsetY` | The distance that shadow, of the arrow head, will be offset vertically. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY).
 | `width` | `number` | `6` | The width of the arrow head in pixels.
+
+## Element
+
+The following diagram is showing the element properties about a `'line'` annotation:
+
+![line](../../img/elementLineProps.png)
+
+The label of a box annotation is described as a [label annotation](./label#element) and accessible by `element.label`.

docs/guide/types/point.md

@@ -103,3 +103,9 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `shadowBlur` | The amount of blur applied to shadow. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur).
 | `shadowOffsetX` | The distance that shadow will be offset horizontally. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetX).
 | `shadowOffsetY` | The distance that shadow will be offset vertically. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowOffsetY).
+
+## Element
+
+The following diagram is showing the element properties about a `'point'` annotation:
+
+![point](../../img/elementPointProps.png)

docs/guide/types/polygon.md

@@ -165,3 +165,9 @@ module.exports = {
   config
 };
 ```
+
+## Element
+
+The following diagram is showing the element properties about a `'polygon'` annotation:
+
+![polygon](../../img/elementPolygonProps.png)