Change enabled to display option in all nodes of annotations

docs/guide/migrationV2.md

@@ -11,6 +11,7 @@ A number of changes were made to the configuration options passed to the plugin
  * When [stacked scales](https://www.chartjs.org/docs/latest/axes/cartesian/#common-options-to-all-cartesian-axes) are used, instead of the whole chart area, the designated scale area is used as fallback for `xMin`, `xMax`, `yMin`, `yMax`, `xValue` or `yValue` options.
  * `cornerRadius` option was replaced by `borderRadius` in the box annotation configuration and in the label configuration of line annotation to align with Chart.js options.
  * `xPadding` and `yPadding` options were merged into a single `padding` object in the label configuration of line annotation to align with Chart.js options.
+ * `enabled` option was replaced by `display` in the callout configuration of label annotation, in the label configuration of line and box annotations and in the arrow heads configuration of line annotation to have the same option on all elements.
 
 ## Events
 

docs/guide/types/box.md

@@ -125,8 +125,8 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | ---- | ---- | :----: | ----
 | `color` | [`Color`](../options#color) | `'black'` | Text color.
 | `content` | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | `null` | The content to show in the label.
+| `display` | `boolean` | `false` | Whether or not the label is shown.
 | `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the box annotation draw time if unset
-| `enabled` | `boolean` | `false` | Whether or not the label is shown.
 | `font` | [`Font`](../options#font) | `{ weight: 'bold' }` | Label font
 | `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
 | `padding` | [`Padding`](../options#padding) | `6` | The padding to add around the text label.

docs/guide/types/label.md

@@ -182,7 +182,7 @@ const options = {
             size: 18
           },
           callout: {
-            enabled: true,
+            display: true,
             side: 10
           }
         }
@@ -224,7 +224,7 @@ All of these options can be [Scriptable](../options#scriptable-options).
 | `borderDashOffset` | `number` | `0` | Offset for line dashes of callout. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderJoinStyle` | `string` | `'miter'` | Border line join style of the callout. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
 | `borderWidth` | `number` | `1` | Stroke width of the pointer of the callout.
-| `enabled` | `boolean` | `false` | If true, the callout is drawn.
+| `display` | `boolean` | `false` | If true, the callout is drawn.
 | `margin` | `number` | `5` | Amount of pixels between the label and the callout separator.
 | `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.

docs/guide/types/line.md

@@ -141,8 +141,8 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `borderWidth` | `number` | `0` | The border line width (in pixels).
 | `color` | [`Color`](../options#color) | `'#fff'` | Text color.
 | `content` | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | `null` | The content to show in the label.
+| `display` | `boolean` | `false` | Whether or not the label is shown.
 | `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset.
-| `enabled` | `boolean` | `false` | Whether or not the label is shown.
 | `font` | [`Font`](../options#font) | `{ weight: 'bold' }` | Label font.
 | `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
 | `padding` | [`Padding`](../options#padding) | `6` | The padding to add around the text label.
@@ -190,7 +190,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
 | `borderDashOffset` | `number` | `lineAnnotation.borderDashOffset` | Offset for border arrow head dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
 | `borderShadowColor` | [`Color`](../options#color) | `lineAnnotation.borderShadowColor` | The color of border shadow of the arrow head. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor).
 | `borderWidth` | `number` | `lineAnnotation.borderWidth` | The border line width (in pixels).
-| `enabled` | `boolean` | `false` | Whether or not the arrow head is shown.
+| `display` | `boolean` | `false` | Whether or not the arrow head is shown.
 | `fill` | `boolean` | `false` | Whether or not the arrow head is filled.
 | `length` | `number` | `12` | The length of the arrow head in pixels.
 | `shadowBlur` | `number` | `lineAnnotation.shadowBlur` | The amount of blur applied to shadow of the arrow head. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur).

docs/samples/box/canvas.md

@@ -24,7 +24,7 @@ const annotation1 = {
   xMax: 2,
   xMin: 5,
   label: {
-    enabled: true,
+    display: true,
     content: Utils.getSpiral(),
     position: {
       x: 'center',
@@ -42,7 +42,7 @@ const annotation2 = {
   xMax: 6,
   xMin: 10,
   label: {
-    enabled: true,
+    display: true,
     content: Utils.getHouse(),
     position: {
       x: 'center',

docs/samples/box/disclosure.md

@@ -23,7 +23,7 @@ const annotation = {
   borderWidth: 0,
   label: {
     drawTime: 'afterDatasetsDraw',
-    enabled: true,
+    display: true,
     color: 'rgba(208, 208, 208, 0.2)',
     content: 'Draft',
     font: {

docs/samples/box/image.md

@@ -27,7 +27,7 @@ const annotation = {
   xMax: 2,
   xMin: 5,
   label: {
-    enabled: true,
+    display: true,
     content: Utils.getImage(),
     width: 150,
     height: 150,

docs/samples/box/quarters.md

@@ -25,7 +25,7 @@ const annotation1 = {
   xMin: -0.5,
   label: {
     drawTime: 'afterDraw',
-    enabled: true,
+    display: true,
     content: 'First quarter',
     position: {
       x: 'center',
@@ -44,7 +44,7 @@ const annotation2 = {
   xMin: 2.5,
   label: {
     drawTime: 'afterDraw',
-    enabled: true,
+    display: true,
     content: 'Second quarter',
     position: {
       x: 'center',
@@ -63,7 +63,7 @@ const annotation3 = {
   xMin: 5.5,
   label: {
     drawTime: 'afterDraw',
-    enabled: true,
+    display: true,
     content: 'Third quarter',
     position: {
       x: 'center',
@@ -81,7 +81,7 @@ const annotation4 = {
   xMin: 8.5,
   label: {
     drawTime: 'afterDraw',
-    enabled: true,
+    display: true,
     content: 'Fourth quarter',
     position: {
       x: 'center',

docs/samples/charts/bar.md

@@ -36,7 +36,7 @@ const annotation1 = {
   value: 0.5,
   label: {
     content: 'Line annotation at x=0.5',
-    enabled: true
+    display: true
   },
 };
 // </block:annotation1>
@@ -53,7 +53,7 @@ const annotation2 = {
     position: 'start',
     backgroundColor: 'black',
     content: 'Line at x=Label 5',
-    enabled: true
+    display: true
   }
 };
 // </block:annotation2>

docs/samples/charts/line.md

@@ -32,7 +32,7 @@ const annotation1 = {
   label: {
     rotation: 'auto',
     content: 'Line at x=5',
-    enabled: true
+    display: true
   },
 };
 // </block:annotation1>
@@ -49,7 +49,7 @@ const annotation2 = {
     position: 'start',
     backgroundColor: 'black',
     content: 'Line at x=90',
-    enabled: true
+    display: true
   }
 };
 // </block:annotation2>

docs/samples/intro.md

@@ -40,7 +40,7 @@ const annotation1 = {
   label: {
     backgroundColor: 'red',
     content: 'Test Label',
-    enabled: true
+    display: true
   },
   scaleID: 'y',
   value: Utils.rand(-100, 100)

docs/samples/label/callout.md

@@ -21,7 +21,7 @@ const annotation = {
   type: 'label',
   backgroundColor: 'rgba(245, 245, 245)',
   callout: {
-    enabled: true,
+    display: true,
     borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor
   },
   content: (ctx) => 'Maximum value is ' + maxValue(ctx).toFixed(2),

docs/samples/label/image.md

@@ -30,7 +30,7 @@ const annotation1 = {
   borderWidth: 1,
   borderDash: [6, 6],
   callout: {
-    enabled: true,
+    display: true,
     position: 'left'
   }
 };

docs/samples/label/innerChart.md

@@ -49,7 +49,7 @@ const annotation2 = {
   content: (ctx) => [innerChart.data.labels[getVisibleDatasetIndex(ctx)],
     'items trend'],
   callout: {
-    enabled: true,
+    display: true,
     position: 'bottom',
     margin: 0
   },

docs/samples/line/animation.md

@@ -30,7 +30,7 @@ const line = {
   borderColor: 'red',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     content: 'Limit',
     rotation: 90
   },

docs/samples/line/average.md

@@ -31,7 +31,7 @@ const annotation = {
   borderDashOffset: 0,
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     content: (ctx) => 'Average: ' + average(ctx).toFixed(2),
     position: 'end'
   },

docs/samples/line/canvas.md

@@ -31,7 +31,7 @@ const annotation = {
   scaleID: 'y',
   value: 50,
   label: {
-    enabled: true,
+    display: true,
     content: Utils.getHouse(),
     backgroundColor: 'white',
     borderWidth: 3,

docs/samples/line/datasetBars.md

@@ -24,7 +24,7 @@ const annotation1 = {
   borderColor: 'green',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'green',
     borderRadius: 0,
     color: 'white',
@@ -45,7 +45,7 @@ const annotation2 = {
   borderColor: 'green',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'green',
     borderRadius: 0,
     color: 'white',
@@ -66,7 +66,7 @@ const annotation3 = {
   borderColor: 'green',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'green',
     borderRadius: 0,
     color: 'white',
@@ -87,7 +87,7 @@ const annotation4 = {
   borderColor: 'green',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'green',
     borderRadius: 0,
     color: 'white',

docs/samples/line/image.md

@@ -31,7 +31,7 @@ const annotation = {
   scaleID: 'y',
   value: 50,
   label: {
-    enabled: true,
+    display: true,
     content: Utils.getImage(),
     backgroundColor: 'white',
     borderWidth: 3,

docs/samples/line/labelVisibility.md

@@ -29,7 +29,7 @@ const annotation1 = {
   borderColor: 'lightGreen',
   borderWidth: 10,
   label: {
-    enabled: false,
+    display: false,
     backgroundColor: 'green',
     drawTime: 'afterDatasetsDraw',
     content: (ctx) => ['Average of dataset', 'is: ' + average(ctx).toFixed(3)]
@@ -39,11 +39,11 @@ const annotation1 = {
   // For simple property changes, you can directly modify the annotation
   // element's properties then call chart.draw().  This is faster.
   enter({chart, element}, event) {
-    element.options.label.enabled = true;
+    element.options.label.display = true;
     chart.draw();
   },
   leave({chart, element}, event) {
-    element.options.label.enabled = false;
+    element.options.label.display = false;
     chart.draw();
   }
 };
@@ -55,7 +55,7 @@ const annotation2 = {
   borderColor: 'lightBlue',
   borderWidth: 10,
   label: {
-    enabled: (ctx) => ctx.hovered,
+    display: (ctx) => ctx.hovered,
     backgroundColor: 'blue',
     drawTime: 'afterDatasetsDraw',
     content: (ctx) => ['Min of dataset', 'is: ' + min(ctx).toFixed(3)],
@@ -85,7 +85,7 @@ const config = {
   options: {
     plugins: {
       tooltip: {
-        enabled: false,
+        display: false,
       },
       annotation: {
         drawTime: 'beforeDatasetsDraw',

docs/samples/line/limited.md

@@ -26,19 +26,19 @@ const annotation1 = {
   borderColor: 'green',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'lightGreen',
     borderRadius: 0,
     color: 'green',
     content: 'Summer time'
   },
   arrowHeads: {
     start: {
-      enabled: true,
+      display: true,
       borderColor: 'green'
     },
     end: {
-      enabled: true,
+      display: true,
       borderColor: 'green'
     }
   },

docs/samples/line/lowerUpper.md

@@ -33,7 +33,7 @@ const annotation1 = {
   borderColor: 'black',
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'black',
     borderColor: 'black',
     borderRadius: 10,
@@ -52,7 +52,7 @@ const annotation2 = {
   borderWidth: 3,
   borderColor: 'black',
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'black',
     borderColor: 'black',
     borderRadius: 10,

docs/samples/line/standardDeviation.md

@@ -31,7 +31,7 @@ const annotation1 = {
   borderDashOffset: 0,
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'rgb(100, 149, 237)',
     content: (ctx) => 'Average: ' + average(ctx).toFixed(2)
   },
@@ -48,7 +48,7 @@ const annotation2 = {
   borderDashOffset: 0,
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'rgba(102, 102, 102, 0.5)',
     color: 'black',
     content: (ctx) => (average(ctx) + standardDeviation(ctx)).toFixed(2),
@@ -69,7 +69,7 @@ const annotation3 = {
   borderDashOffset: 0,
   borderWidth: 3,
   label: {
-    enabled: true,
+    display: true,
     backgroundColor: 'rgba(102, 102, 102, 0.5)',
     color: 'black',
     content: (ctx) => (average(ctx) - standardDeviation(ctx)).toFixed(2),

docs/samples/line/visibility.md

@@ -33,7 +33,7 @@ const annotation = {
   borderWidth: 1,
   display: (ctx) => ctx.chart.isDatasetVisible(1),
   label: {
-    enabled: true,
+    display: true,
     content: 'Now',
     position: 'start'
   },