Add z option to all annotations

docs/guide/types/box.md

@@ -75,6 +75,7 @@ The following options are available for box annotations.
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -92,6 +93,7 @@ If one of the axes does not match an axis in the chart, the box will take the en
 | `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. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
+| `z` | The `z` property determines the drawing stack level of the box annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Styling
 
@@ -138,6 +140,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `width` | `number`\|`string` | `undefined` | Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.
 | `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
 | `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
+| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`.
 
 ### Position
 

docs/guide/types/ellipse.md

@@ -71,6 +71,7 @@ The following options are available for ellipse annotations.
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -88,6 +89,7 @@ If one of the axes does not match an axis in the chart, the ellipse will take th
 | `yMax` | Bottom edge of the ellipse in units along the y axis.
 | `yMin` | Top edge of the ellipse in units along the y axis.
 | `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
+| `z` | The `z` property determines the drawing stack level of the ellipse annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Styling
 

docs/guide/types/label.md

@@ -91,6 +91,7 @@ The following options are available for label annotations.
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `undefined`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -119,6 +120,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `yMin` | Top edge of the box in units along the y axis.
 | `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the point in units along the y axis.
+| `z` | The `z` property determines the drawing stack level of the label annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Styling
 

docs/guide/types/line.md

@@ -72,6 +72,7 @@ The following options are available for line annotations. All of these options c
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#positioning) | `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -89,6 +90,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the li
 | `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).
+| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Positioning
 
@@ -157,6 +159,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `width` | `number`\|`string` | `undefined` | Overrides the width of the image or canvas element. Could be set in pixel by a number, or in percentage of current width of image or canvas element by a string. If undefined, uses the width of the image or canvas element. It is used only when the content is an image or canvas element.
 | `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
 | `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
+| `z` | `number` | `0` | It determines the drawing stack level of the label element, with same `drawTime`.
 
 ### borderRadius
 

docs/guide/types/point.md

@@ -75,6 +75,7 @@ The following options are available for point annotations.
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yScaleID`](#general) | `string` | Yes | `undefined`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -99,6 +100,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `yMin` | Top edge of the box in units along the y axis.
 | `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the point in units along the y axis.
+| `z` | The `z` property determines the drawing stack level of the point annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Styling
 

docs/guide/types/polygon.md

@@ -80,6 +80,7 @@ The following options are available for polygon annotations.
 | [`yMax`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yMin`](#general) | `number` \| `string` | Yes | `undefined`
 | [`yValue`](#general) | `number` \| `string` | Yes | `undefined`
+| [`z`](#general) | `number` | Yes | `0`
 
 ### General
 
@@ -105,6 +106,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 | `yMin` | Top edge of the box in units along the y axis.
 | `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale.
 | `yValue` | Y coordinate of the polygon in units along the y axis.
+| `z` | The `z` property determines the drawing stack level of the polygon annotation element. All visible elements will be drawn in crescent order of `z` option, with the same `drawTime` option.
 
 ### Styling
 

src/annotation.js

@@ -150,25 +150,31 @@ function draw(chart, caller, clip) {
     area = chartArea;
   }
 
-  drawElements(chart, visibleElements, caller, area);
+  const drawableElements = drawElements(visibleElements, caller, area).sort((a, b) => a.element.options.z - b.element.options.z);
+
+  for (const item of drawableElements) {
+    item.element.draw(chart.ctx, item.area);
+  }
 
   if (clip) {
     unclipArea(ctx);
   }
 }
 
-function drawElements(chart, elements, caller, area) {
+function drawElements(elements, caller, area) {
+  const drawableElements = [];
   for (const el of elements) {
     if (el.options.drawTime === caller) {
-      el.draw(chart.ctx, area);
+      drawableElements.push({element: el, area});
     }
     if (el.elements && el.elements.length) {
       const box = 'getBoundingBox' in el ? el.getBoundingBox() : area;
       for (const sub of el.elements) {
         if (sub.options.display && sub.options.drawTime === caller) {
-          sub.draw(chart.ctx, box);
+          drawableElements.push({element: sub, area: box});
         }
       }
     }
   }
+  return drawableElements;
 }

src/types/box.js

@@ -88,9 +88,10 @@ BoxAnnotation.defaults = {
     textAlign: 'start',
     textStrokeColor: undefined,
     textStrokeWidth: 0,
+    width: undefined,
     xAdjust: 0,
     yAdjust: 0,
-    width: undefined
+    z: undefined
   },
   rotation: 0,
   shadowBlur: 0,
@@ -101,7 +102,8 @@ BoxAnnotation.defaults = {
   xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: undefined
+  yScaleID: undefined,
+  z: 0
 };
 
 BoxAnnotation.defaultRoutes = {

src/types/ellipse.js

@@ -64,7 +64,8 @@ EllipseAnnotation.defaults = {
   xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: undefined
+  yScaleID: undefined,
+  z: 0
 };
 
 EllipseAnnotation.defaultRoutes = {

src/types/label.js

@@ -110,7 +110,8 @@ LabelAnnotation.defaults = {
   yMax: undefined,
   yMin: undefined,
   yScaleID: undefined,
-  yValue: undefined
+  yValue: undefined,
+  z: 0
 };
 
 LabelAnnotation.defaultRoutes = {

src/types/line.js

@@ -173,7 +173,8 @@ LineAnnotation.defaults = {
     textStrokeWidth: 0,
     width: undefined,
     xAdjust: 0,
-    yAdjust: 0
+    yAdjust: 0,
+    z: undefined
   },
   scaleID: undefined,
   shadowBlur: 0,
@@ -185,7 +186,8 @@ LineAnnotation.defaults = {
   xScaleID: undefined,
   yMax: undefined,
   yMin: undefined,
-  yScaleID: undefined
+  yScaleID: undefined,
+  z: 0
 };
 
 LineAnnotation.descriptors = {

src/types/point.js

@@ -69,7 +69,8 @@ PointAnnotation.defaults = {
   yMax: undefined,
   yMin: undefined,
   yScaleID: undefined,
-  yValue: undefined
+  yValue: undefined,
+  z: 0
 };
 
 PointAnnotation.defaultRoutes = {

src/types/polygon.js

@@ -91,7 +91,8 @@ PolygonAnnotation.defaults = {
   yMax: undefined,
   yMin: undefined,
   yScaleID: undefined,
-  yValue: undefined
+  yValue: undefined,
+  z: 0
 };
 
 PolygonAnnotation.defaultRoutes = {

test/fixtures/box/zIndex.js

@@ -0,0 +1,120 @@
+module.exports = {
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: false,
+          min: 0,
+          max: 10
+        },
+        y: {
+          display: false,
+          min: 0,
+          max: 25
+        }
+      },
+      plugins: {
+        annotation: {
+          annotations: {
+            box1: {
+              type: 'box',
+              xMin: 3,
+              xMax: 7,
+              yMin: 1,
+              yMax: 4,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgb(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box1 z:+10/z: 0',
+                z: 0
+              },
+              z: 10
+            },
+            box2: {
+              type: 'box',
+              xMin: 1.5,
+              xMax: 5.5,
+              yMin: 15,
+              yMax: 23.5,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box2 fallback/z: +100',
+                z: 100
+              }
+            },
+            box3: {
+              type: 'box',
+              xMin: 2.5,
+              xMax: 7,
+              yMin: 16,
+              yMax: 21,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box3 fallback/z: -1',
+                z: -1
+              }
+            },
+            box4: {
+              type: 'box',
+              xMin: 3,
+              xMax: 7,
+              yMin: 5,
+              yMax: 9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box4 fallback/fallback',
+              },
+            },
+            box5: {
+              type: 'box',
+              xMin: 1.5,
+              xMax: 5.5,
+              yMin: 10,
+              yMax: 14.5,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box5 z: +100/z: 0',
+                position: 'start',
+                z: 0
+              },
+              z: 100
+            },
+            box6: {
+              type: 'box',
+              xMin: 2.5,
+              xMax: 4.5,
+              yMin: 11,
+              yMax: 13.5,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 1,
+              label: {
+                display: true,
+                content: 'box6 z: 0/fallback',
+              },
+              z: 0
+            }
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true
+  }
+};