Shorten alignment settings for axes (#7886)

* Rename crossAlignment to crossAlign
* Update alignment to align for cartesian axes

diff --git a/docs/docs/axes/cartesian/index.mdx b/docs/docs/axes/cartesian/index.mdx
index d31a643663fede2a163b69b6a9db25bc91b590a9..b1d8d68f77bb24992ef21aa14d65a84506a36602 100644 (file)
--- a/docs/docs/axes/cartesian/index.mdx
+++ b/docs/docs/axes/cartesian/index.mdx
@@ -49,8 +49,8 @@ The following options are common to all cartesian axes but do not apply to other
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `alignment` | `string` | | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.
-| `crossAlignment` | `string` | | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](#tick-alignment)
+| `align` | `string` | | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.
+| `crossAlign` | `string` | | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](#tick-alignment)
 | `sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
 | `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
 | `autoSkipPadding` | `number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.
@@ -62,7 +62,7 @@ The following options are common to all cartesian axes but do not apply to other
 
 ### Tick Alignment
 
-The alignment of ticks is primarily controlled using two settings on the tick configuration object: `alignment` and `crossAlignment`. The `alignment` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlignment` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlignment` setting is used to left align the labels on the Y axis.
+The alignment of ticks is primarily controlled using two settings on the tick configuration object: `align` and `crossAlign`. The `align` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlign` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlign` setting is used to left align the labels on the Y axis.
 
 ```jsx live
 function exampleAlignment() {
@@ -105,7 +105,7 @@ function exampleAlignment() {
           },
           y: {
             ticks: {
-              crossAlignment: 'far',
+              crossAlign: 'far',
             }
           }
         }
@@ -117,7 +117,7 @@ function exampleAlignment() {
 }
 ```
 
-**Note:** the `crossAlignment` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
+**Note:** the `crossAlign` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
 
 ### Axis ID
 

diff --git a/samples/scales/label-text-alignment.html b/samples/scales/label-text-alignment.html
index 4e542692f2e73a95811f76fbadae31086e9c9299..ac3d9f6b4c9560fd1fa6db74b877b58aaadd398d 100644 (file)
--- a/samples/scales/label-text-alignment.html
+++ b/samples/scales/label-text-alignment.html
@@ -87,13 +87,13 @@
                                                x: {
                                                        display: true,
                                                        ticks: {
-                                                               alignment: xAlign,
+                                                               align: xAlign,
                                                        }
                                                },
                                                y: {
                                                        display: true,
                                                        ticks: {
-                                                               alignment: yAlign
+                                                               align: yAlign
                                                        }
                                                }
                                        },

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 5dc8d7e2d9c63b3814f5929ba57ae5002063c678..14225354d4e91ba0d2050dbba94351ad58f453f6 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -62,8 +62,8 @@ defaults.set('scale', {
                callback: Ticks.formatters.values,
                minor: {},
                major: {},
-               alignment: 'center',
-               crossAlignment: 'near',
+               align: 'center',
+               crossAlign: 'near',
        }
 });
 
@@ -763,10 +763,10 @@ export default class Scale extends Element {
                                        paddingRight = labelsBelowTicks ?
                                                sinRotation * (lastLabelSize.height - lastLabelSize.offset) :
                                                cosRotation * lastLabelSize.width + sinRotation * lastLabelSize.offset;
-                               } else if (tickOpts.alignment === 'start') {
+                               } else if (tickOpts.align === 'start') {
                                        paddingLeft = 0;
                                        paddingRight = lastLabelSize.width;
-                               } else if (tickOpts.alignment === 'end') {
+                               } else if (tickOpts.align === 'end') {
                                        paddingLeft = firstLabelSize.width;
                                        paddingRight = 0;
                                } else {
@@ -791,10 +791,10 @@ export default class Scale extends Element {
                                let paddingTop = lastLabelSize.height / 2;
                                let paddingBottom = firstLabelSize.height / 2;
 
-                               if (tickOpts.alignment === 'start') {
+                               if (tickOpts.align === 'start') {
                                        paddingTop = 0;
                                        paddingBottom = firstLabelSize.height;
-                               } else if (tickOpts.alignment === 'end') {
+                               } else if (tickOpts.align === 'end') {
                                        paddingTop = lastLabelSize.height;
                                        paddingBottom = 0;
                                }
@@ -1253,7 +1253,7 @@ export default class Scale extends Element {
                const {position, ticks: optionTicks} = options;
                const isHorizontal = me.isHorizontal();
                const ticks = me.ticks;
-               const {alignment, crossAlignment, padding} = optionTicks;
+               const {align, crossAlign, padding} = optionTicks;
                const tl = getTickMarkLength(options.gridLines);
                const tickAndPadding = tl + padding;
                const rotation = -toRadians(me.labelRotation);
@@ -1296,9 +1296,9 @@ export default class Scale extends Element {
                }
 
                if (axis === 'y') {
-                       if (alignment === 'start') {
+                       if (align === 'start') {
                                textBaseline = 'top';
-                       } else if (alignment === 'end') {
+                       } else if (align === 'end') {
                                textBaseline = 'bottom';
                        }
                }
@@ -1317,20 +1317,20 @@ export default class Scale extends Element {
                        if (isHorizontal) {
                                x = pixel;
                                if (position === 'top') {
-                                       if (crossAlignment === 'near' || rotation !== 0) {
+                                       if (crossAlign === 'near' || rotation !== 0) {
                                                textOffset = (Math.sin(rotation) * halfCount + 0.5) * lineHeight;
                                                textOffset -= (rotation === 0 ? (lineCount - 0.5) : Math.cos(rotation) * halfCount) * lineHeight;
-                                       } else if (crossAlignment === 'center') {
+                                       } else if (crossAlign === 'center') {
                                                textOffset = -1 * (labelSizes.highest.height / 2);
                                                textOffset -= halfCount * lineHeight;
                                        } else {
                                                textOffset = (-1 * labelSizes.highest.height) + (0.5 * lineHeight);
                                        }
                                } else if (position === 'bottom') {
-                                       if (crossAlignment === 'near' || rotation !== 0) {
+                                       if (crossAlign === 'near' || rotation !== 0) {
                                                textOffset = Math.sin(rotation) * halfCount * lineHeight;
                                                textOffset += (rotation === 0 ? 0.5 : Math.cos(rotation) * halfCount) * lineHeight;
-                                       } else if (crossAlignment === 'center') {
+                                       } else if (crossAlign === 'center') {
                                                textOffset = labelSizes.highest.height / 2;
                                                textOffset -= halfCount * lineHeight;
                                        } else {
@@ -1368,9 +1368,9 @@ export default class Scale extends Element {
 
                let align = 'center';
 
-               if (ticks.alignment === 'start') {
+               if (ticks.align === 'start') {
                        align = 'left';
-               } else if (ticks.alignment === 'end') {
+               } else if (ticks.align === 'end') {
                        align = 'right';
                }
 
@@ -1380,7 +1380,7 @@ export default class Scale extends Element {
        _getYAxisLabelAlignment(tl) {
                const me = this;
                const {position, ticks} = me.options;
-               const {crossAlignment, mirror, padding} = ticks;
+               const {crossAlign, mirror, padding} = ticks;
                const labelSizes = me._getLabelSizes();
                const tickAndPadding = tl + padding;
                const widest = labelSizes.widest.width;
@@ -1395,9 +1395,9 @@ export default class Scale extends Element {
                        } else {
                                x = me.right - tickAndPadding;
 
-                               if (crossAlignment === 'near') {
+                               if (crossAlign === 'near') {
                                        textAlign = 'right';
-                               } else if (crossAlignment === 'center') {
+                               } else if (crossAlign === 'center') {
                                        textAlign = 'center';
                                        x -= (widest / 2);
                                } else {
@@ -1412,9 +1412,9 @@ export default class Scale extends Element {
                        } else {
                                x = me.left + tickAndPadding;
 
-                               if (crossAlignment === 'near') {
+                               if (crossAlign === 'near') {
                                        textAlign = 'left';
-                               } else if (crossAlignment === 'center') {
+                               } else if (crossAlign === 'center') {
                                        textAlign = 'center';
                                        x += widest / 2;
                                } else {

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js
index 5eae38856cc1b68920e51e6f41d47544291baff5..46121d27372ea06903067ec80ac1225fcbef3a2d 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js
@@ -13,7 +13,7 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               crossAlignment: 'center',
+                                               crossAlign: 'center',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js
index f7daff2268f6ffe7ad95b0244016dda64a29b588..aa305d0ce8ffca0caa9f2c3f48fd7ddfbdb95e3a 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js
@@ -13,7 +13,7 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               crossAlignment: 'far',
+                                               crossAlign: 'far',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js
index 69175babc0640785e20e55e959f9b636fd5eb299..2108315294eb8ee8995f386d6246c0139fe3e9c4 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js
@@ -13,7 +13,7 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               crossAlignment: 'near',
+                                               crossAlign: 'near',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js
index d51df0aa3c1236491a8f8b081acc84049871973f..59aa67d18632571a69c8ad83adb04586b0c8aae8 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'left',
                                        ticks: {
-                                               crossAlignment: 'center',
+                                               crossAlign: 'center',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js
index 0e1232c92a98f87254c6f6c428ef9b2100e29091..de119d18c9fa3c6c5ba59b693c9413df218c8b85 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'left',
                                        ticks: {
-                                               crossAlignment: 'far',
+                                               crossAlign: 'far',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js
index 591e92c66c29ca3fca11150dcf7d32ae71ec3f71..6531612e1cd5b7a4d192671751e76fb3e31b6e23 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'left',
                                        ticks: {
-                                               crossAlignment: 'near',
+                                               crossAlign: 'near',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js
index 4e56f15b0196173763a2112fe3b2157c7b128e72..10a41b22849deb591b240e4ecfb2c692e2ea527a 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'right',
                                        ticks: {
-                                               crossAlignment: 'center',
+                                               crossAlign: 'center',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js
index fc7906f46cc374be4cf7b25a66fdf741134e5292..adbdb32d22ee00748b718ad0a5f9633bf315c9a7 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'right',
                                        ticks: {
-                                               crossAlignment: 'far',
+                                               crossAlign: 'far',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js
index acdc5bca7679b2d0b488e7be3d3b5dbfda44d173..cd8e94e357d612480b1932141fec361e17ea6e6e 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js
@@ -15,7 +15,7 @@ module.exports = {
                                y: {
                                        position: 'right',
                                        ticks: {
-                                               crossAlignment: 'near',
+                                               crossAlign: 'near',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js
index 4ed7034d681a3fa9f5fe77e7d8633887d2aa837f..31386b773173cc918f89802f3226ceae67f1aa11 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js
@@ -14,7 +14,7 @@ module.exports = {
                                x: {
                                        position: 'top',
                                        ticks: {
-                                               crossAlignment: 'center',
+                                               crossAlign: 'center',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js
index 2d6f8ceb31b800f1812ba520674418ed120a3cb1..c4606b715febd424e4f95941dd668ad25cd07179 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js
@@ -14,7 +14,7 @@ module.exports = {
                                x: {
                                        position: 'top',
                                        ticks: {
-                                               crossAlignment: 'far',
+                                               crossAlign: 'far',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js
index e2a97974e5c62d2719f52ab3f21e3162560703b3..c89e3c01aa393f89f7fdddbd9e2fbd43671f92e6 100644 (file)
--- a/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js
@@ -14,7 +14,7 @@ module.exports = {
                                x: {
                                        position: 'top',
                                        ticks: {
-                                               crossAlignment: 'near',
+                                               crossAlign: 'near',
                                        },
                                },
                        }

diff --git a/test/fixtures/core.scale/label-align-center.js b/test/fixtures/core.scale/label-align-center.js
index 1e9907bf940af50095111fdc765c541c19637faf..d0a5a04de8426427ee0be12eaf402457ad84f4af 100644 (file)
--- a/test/fixtures/core.scale/label-align-center.js
+++ b/test/fixtures/core.scale/label-align-center.js
@@ -13,12 +13,12 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               alignment: 'center',
+                                               align: 'center',
                                        },
                                },
                                y: {
                                        ticks: {
-                                               alignment: 'center',
+                                               align: 'center',
                                        }
                                }
                        }

diff --git a/test/fixtures/core.scale/label-align-end.js b/test/fixtures/core.scale/label-align-end.js
index 19a0e8ad3f50e3a5d98bce41a988a15a63ad915c..d7b19fe1363d11515c628780d9b7f90a31f77fe7 100644 (file)
--- a/test/fixtures/core.scale/label-align-end.js
+++ b/test/fixtures/core.scale/label-align-end.js
@@ -13,12 +13,12 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               alignment: 'end',
+                                               align: 'end',
                                        },
                                },
                                y: {
                                        ticks: {
-                                               alignment: 'end',
+                                               align: 'end',
                                        }
                                }
                        }

diff --git a/test/fixtures/core.scale/label-align-start.js b/test/fixtures/core.scale/label-align-start.js
index b5284cd96f47de8cf560121f2c44fe14fa5c3e6d..3edcb65003b170a2dd77f2e1f52d1cf1f21e009d 100644 (file)
--- a/test/fixtures/core.scale/label-align-start.js
+++ b/test/fixtures/core.scale/label-align-start.js
@@ -13,12 +13,12 @@ module.exports = {
                        scales: {
                                x: {
                                        ticks: {
-                                               alignment: 'start',
+                                               align: 'start',
                                        },
                                },
                                y: {
                                        ticks: {
-                                               alignment: 'start',
+                                               align: 'start',
                                        }
                                }
                        }

diff --git a/types/scales/index.d.ts b/types/scales/index.d.ts
index 81e1cce2fbf9eee59bbac41418694e1f7f43bacf..4324b0188df043ca276499b273c14c8db10f3e61 100644 (file)
--- a/types/scales/index.d.ts
+++ b/types/scales/index.d.ts
@@ -132,7 +132,7 @@ export interface ICartesianScaleOptions extends ICoreScaleOptions {
      * The label alignment
      * @default 'center'
      */
-    alignment: 'start' | 'center' | 'end';
+    align: 'start' | 'center' | 'end';
     /**
      *         If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
      * @default true
@@ -149,7 +149,7 @@ export interface ICartesianScaleOptions extends ICoreScaleOptions {
      * This only applies when the rotation is 0 and the axis position is one of "top", "left", "right", or "bottom"
      * @default 'near'
      */
-    crossAlignment: 'near' | 'center' | 'far';
+    crossAlign: 'near' | 'center' | 'far';
 
     /**
      * Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas