From 962ee4be6485b9964677f981d89a276f7aed0de7 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Mon, 6 Jun 2022 12:07:18 +0200 Subject: [PATCH 1/2] Add element diagrams to the annotation types guide --- docs/guide/types/box.md | 8 ++++++++ docs/guide/types/ellipse.md | 6 ++++++ docs/guide/types/label.md | 6 ++++++ docs/guide/types/line.md | 8 ++++++++ docs/guide/types/point.md | 6 ++++++ docs/guide/types/polygon.md | 6 ++++++ 6 files changed, 40 insertions(+) diff --git a/docs/guide/types/box.md b/docs/guide/types/box.md index 021f88ec2..9c6a16408 100644 --- a/docs/guide/types/box.md +++ b/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`. diff --git a/docs/guide/types/ellipse.md b/docs/guide/types/ellipse.md index f78b081a1..4ead77c7c 100644 --- a/docs/guide/types/ellipse.md +++ b/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) diff --git a/docs/guide/types/label.md b/docs/guide/types/label.md index 8ab09f698..e02af9ebc 100644 --- a/docs/guide/types/label.md +++ b/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) diff --git a/docs/guide/types/line.md b/docs/guide/types/line.md index 6afb0479d..ea55e8534 100644 --- a/docs/guide/types/line.md +++ b/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`. diff --git a/docs/guide/types/point.md b/docs/guide/types/point.md index 84063d2de..9f29a42a0 100644 --- a/docs/guide/types/point.md +++ b/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) diff --git a/docs/guide/types/polygon.md b/docs/guide/types/polygon.md index fd9afb368..6476ae141 100644 --- a/docs/guide/types/polygon.md +++ b/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) From d017b615997849cd659ce8b8f45817dfedf12aff Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 30 Sep 2022 18:09:36 +0200 Subject: [PATCH 2/2] Fix the scales configuration of the basic label sample --- docs/samples/label/basic.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/samples/label/basic.md b/docs/samples/label/basic.md index 5017308aa..8cc392296 100644 --- a/docs/samples/label/basic.md +++ b/docs/samples/label/basic.md @@ -70,11 +70,6 @@ const config = { data, options: { scales: { - x: { - beginAtZero: true, - max: 120, - min: 0 - }, y: { beginAtZero: true, max: 120,