Rename scale gridLines options to be clearer (#8628)

* Rename `options.gridLines` to `options.grid`

* Rename `offsetGridLines` to `offset`

docs/docs/axes/_common.md

@@ -7,7 +7,7 @@ Namespace: `options.scales[scaleId]`
 | `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
 | `backgroundColor` | [`Color`](../general/colors.md) | | Background color of the scale area.
 | `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
-| `gridLines` | `object` | | Grid line configuration. [more...](./styling.mdx#grid-line-configuration)
+| `grid` | `object` | | Grid line configuration. [more...](./styling.mdx#grid-line-configuration)
 | `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](./index.mdx#axis-range-settings)
 | `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](./index.mdx#axis-range-settings)
 | `reverse` | `boolean` | `false` | Reverse the scale.

docs/docs/axes/styling.mdx

@@ -8,7 +8,7 @@ There are a number of options to allow styling an axis. There are settings to co
 
 ## Grid Line Configuration
 
-Namespace: `options.scales[scaleId].gridLines`, it defines options for the grid lines that run perpendicular to the axis.
+Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines that run perpendicular to the axis.
 
 | Name | Type | Scriptable | Indexable | Default | Description
 | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
@@ -23,7 +23,7 @@ Namespace: `options.scales[scaleId].gridLines`, it defines options for the grid
 | `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
 | `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
 | `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
-| `offsetGridLines` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
+| `offset` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
 | `tickBorderDash` | `number[]` | | | | Length and spacing of the tick mark line. If not set, defaults to the grid line `borderDash` value.
 | `tickBorderDashOffset` | `number` | Yes | Yes |  | Offset for the line dash of the tick mark. If unset, defaults to the grid line `borderDashOffset` value
 | `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.

docs/docs/charts/bar.mdx

@@ -213,23 +213,23 @@ The bar chart sets unique default values for the following configuration from th
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `offset` | `boolean` | `true` | If true, extra space is added to both edges and the axis is scaled to fit into the chart area.
-| `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
+| `grid.offset` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
 
 ### Example scale configuration
 
 ```javascript
 options = {
     scales: {
         x: {
-            gridLines: {
-                offsetGridLines: true
+            grid: {
+              offset: true
             }
         }
     }
 };
 ```
 
-### offsetGridLines
+### Offset Grid Lines
 
 If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
 

docs/docs/getting-started/v3-migration.md

@@ -229,7 +229,9 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 
 #### Ticks
 
-* `options.gridLines.tickMarkLength` was renamed to `options.gridLines.tickLength`.
+* `options.gridLines` was renamed to `options.grid`
+* `options.gridLines.offsetGridLines` was renamed to `options.grid.offset`.
+* `options.gridLines.tickMarkLength` was renamed to `options.grid.tickLength`.
 * `options.ticks.fixedStepSize` is no longer used. Use `options.ticks.stepSize`.
 * `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts.
 * `Chart.Ticks.formatters.linear` was renamed to `Chart.Ticks.formatters.numeric`.

samples/charts/bar/multi-axis.html

@@ -86,7 +86,7 @@
 							type: 'linear',
 							display: true,
 							position: 'right',
-							gridLines: {
+							grid: {
 								drawOnChartArea: false
 							}
 						},

samples/charts/line/multi-axis.html

@@ -84,7 +84,7 @@
 							position: 'right',
 
 							// grid line settings
-							gridLines: {
+							grid: {
 								drawOnChartArea: false, // only want the grid lines for one axis to show up
 							},
 						},

samples/charts/scatter/multi-axis.html

@@ -125,7 +125,7 @@
 							}
 						},
 
-						gridLines: {
+						grid: {
 							drawOnChartArea: false, // only want the grid lines for one axis to show up
 						}
 					}

samples/scales/financial.html

@@ -173,7 +173,7 @@
 					},
 					y: {
 						type: 'linear',
-						gridLines: {
+						grid: {
 							drawBorder: false
 						},
 						title: {

samples/scales/gridlines-display.html

@@ -29,7 +29,7 @@
 <body>
 	<div class="container"></div>
 	<script>
-		function createConfig(gridlines, title) {
+		function createConfig(grid, title) {
 			return {
 				type: 'line',
 				data: {
@@ -58,10 +58,10 @@
 					},
 					scales: {
 						x: {
-							gridLines: gridlines
+							grid: grid
 						},
 						y: {
-							gridLines: gridlines,
+							grid: grid,
 							min: 0,
 							max: 100,
 							ticks: {
@@ -78,30 +78,30 @@
 
 			[{
 				title: 'Display: true',
-				gridLines: {
+				grid: {
 					display: true
 				}
 			}, {
 				title: 'Display: false',
-				gridLines: {
+				grid: {
 					display: false
 				}
 			}, {
 				title: 'Display: false, no border',
-				gridLines: {
+				grid: {
 					display: false,
 					drawBorder: false
 				}
 			}, {
 				title: 'DrawOnChartArea: false',
-				gridLines: {
+				grid: {
 					display: true,
 					drawBorder: true,
 					drawOnChartArea: false,
 				}
 			}, {
 				title: 'DrawTicks: false',
-				gridLines: {
+				grid: {
 					display: true,
 					drawBorder: true,
 					drawOnChartArea: true,
@@ -116,7 +116,7 @@
 				container.appendChild(div);
 
 				var ctx = canvas.getContext('2d');
-				var config = createConfig(details.gridLines, details.title);
+				var config = createConfig(details.grid, details.title);
 				new Chart(ctx, config);
 			});
 		};

samples/scales/gridlines-scriptable.html

@@ -47,7 +47,7 @@
 				},
 				scales: {
 					y: {
-						gridLines: {
+						grid: {
 							drawBorder: false,
 							color: function(context) {
 								if (context.tick.value > 0) {

samples/scales/gridlines-style.html

@@ -47,7 +47,7 @@
 				},
 				scales: {
 					y: {
-						gridLines: {
+						grid: {
 							drawBorder: false,
 							color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
 						},

src/controllers/controller.bar.js

@@ -535,8 +535,8 @@ BarController.overrides = {
     _index_: {
       type: 'category',
       offset: true,
-      gridLines: {
-        offsetGridLines: true
+      grid: {
+        offset: true
       }
     },
     _value_: {

src/controllers/controller.polarArea.js

@@ -187,7 +187,7 @@ PolarAreaController.overrides = {
         display: false
       },
       beginAtZero: true,
-      gridLines: {
+      grid: {
         circular: true
       },
       pointLabels: {

src/core/core.scale.js

@@ -37,7 +37,7 @@ defaults.set('scale', {
   grace: 0,
 
   // grid line settings
-  gridLines: {
+  grid: {
     display: true,
     lineWidth: 1,
     drawBorder: true,
@@ -46,7 +46,7 @@ defaults.set('scale', {
     tickLength: 10,
     tickWidth: (_ctx, options) => options.lineWidth,
     tickColor: (_ctx, options) => options.color,
-    offsetGridLines: false,
+    offset: false,
     borderDash: [],
     borderDashOffset: 0.0,
     borderColor: (_ctx, options) => options.color,
@@ -90,7 +90,7 @@ defaults.set('scale', {
 });
 
 defaults.route('scale.ticks', 'color', '', 'color');
-defaults.route('scale.gridLines', 'color', '', 'borderColor');
+defaults.route('scale.grid', 'color', '', 'borderColor');
 defaults.route('scale.title', 'color', '', 'color');
 
 defaults.describe('scale', {
@@ -792,7 +792,7 @@ export default class Scale extends Element {
     // Allow 3 pixels x2 padding either side for label readability
     if (maxLabelWidth + 6 > tickWidth) {
       tickWidth = maxWidth / (numTicks - (options.offset ? 0.5 : 1));
-      maxHeight = me.maxHeight - getTickMarkLength(options.gridLines)
+      maxHeight = me.maxHeight - getTickMarkLength(options.grid)
 				- tickOpts.padding - getTitleHeight(options.title, me.chart.options.font);
       maxLabelDiagonal = Math.sqrt(maxLabelWidth * maxLabelWidth + maxLabelHeight * maxLabelHeight);
       labelRotation = toDegrees(Math.min(
@@ -825,7 +825,7 @@ export default class Scale extends Element {
     const opts = me.options;
     const tickOpts = opts.ticks;
     const titleOpts = opts.title;
-    const gridLineOpts = opts.gridLines;
+    const gridLineOpts = opts.grid;
     const display = me._isVisible();
     const labelsBelowTicks = opts.position !== 'top' && me.axis === 'x';
     const isHorizontal = me.isHorizontal();
@@ -1254,15 +1254,15 @@ export default class Scale extends Element {
     const axis = me.axis;
     const chart = me.chart;
     const options = me.options;
-    const {gridLines, position} = options;
-    const offsetGridLines = gridLines.offsetGridLines;
+    const {grid, position} = options;
+    const offset = grid.offset;
     const isHorizontal = me.isHorizontal();
     const ticks = me.ticks;
-    const ticksLength = ticks.length + (offsetGridLines ? 1 : 0);
-    const tl = getTickMarkLength(gridLines);
+    const ticksLength = ticks.length + (offset ? 1 : 0);
+    const tl = getTickMarkLength(grid);
     const items = [];
 
-    const borderOpts = gridLines.setContext(me.getContext(0));
+    const borderOpts = grid.setContext(me.getContext(0));
     const axisWidth = borderOpts.drawBorder ? borderOpts.borderWidth : 0;
     const axisHalfWidth = axisWidth / 2;
     const alignBorderValue = function(pixel) {
@@ -1324,19 +1324,19 @@ export default class Scale extends Element {
     }
 
     for (i = 0; i < ticksLength; ++i) {
-      const optsAtIndex = gridLines.setContext(me.getContext(i));
+      const optsAtIndex = grid.setContext(me.getContext(i));
 
       const lineWidth = optsAtIndex.lineWidth;
       const lineColor = optsAtIndex.color;
-      const borderDash = gridLines.borderDash || [];
+      const borderDash = grid.borderDash || [];
       const borderDashOffset = optsAtIndex.borderDashOffset;
 
       const tickWidth = optsAtIndex.tickWidth;
       const tickColor = optsAtIndex.tickColor;
       const tickBorderDash = optsAtIndex.tickBorderDash || [];
       const tickBorderDashOffset = optsAtIndex.tickBorderDashOffset;
 
-      lineValue = getPixelForGridLine(me, i, offsetGridLines);
+      lineValue = getPixelForGridLine(me, i, offset);
 
       // Skip if the pixel is out of the range
       if (lineValue === undefined) {
@@ -1388,7 +1388,7 @@ export default class Scale extends Element {
     const isHorizontal = me.isHorizontal();
     const ticks = me.ticks;
     const {align, crossAlign, padding} = optionTicks;
-    const tl = getTickMarkLength(options.gridLines);
+    const tl = getTickMarkLength(options.grid);
     const tickAndPadding = tl + padding;
     const rotation = -toRadians(me.labelRotation);
     const items = [];
@@ -1609,20 +1609,20 @@ export default class Scale extends Element {
 	 */
   drawGrid(chartArea) {
     const me = this;
-    const gridLines = me.options.gridLines;
+    const grid = me.options.grid;
     const ctx = me.ctx;
     const chart = me.chart;
-    const borderOpts = gridLines.setContext(me.getContext(0));
-    const axisWidth = gridLines.drawBorder ? borderOpts.borderWidth : 0;
+    const borderOpts = grid.setContext(me.getContext(0));
+    const axisWidth = grid.drawBorder ? borderOpts.borderWidth : 0;
     const items = me._gridLineItems || (me._gridLineItems = me._computeGridLineItems(chartArea));
     let i, ilen;
 
-    if (gridLines.display) {
+    if (grid.display) {
       for (i = 0, ilen = items.length; i < ilen; ++i) {
         const item = items[i];
         const {color, tickColor, tickWidth, width} = item;
 
-        if (width && color && gridLines.drawOnChartArea) {
+        if (width && color && grid.drawOnChartArea) {
           ctx.save();
           ctx.lineWidth = width;
           ctx.strokeStyle = color;
@@ -1638,7 +1638,7 @@ export default class Scale extends Element {
           ctx.restore();
         }
 
-        if (tickWidth && tickColor && gridLines.drawTicks) {
+        if (tickWidth && tickColor && grid.drawTicks) {
           ctx.save();
           ctx.lineWidth = tickWidth;
           ctx.strokeStyle = tickColor;
@@ -1658,7 +1658,7 @@ export default class Scale extends Element {
 
     if (axisWidth) {
       // Draw the line at the edge of the axis
-      const edgeOpts = gridLines.setContext(me.getContext(me._ticksLength - 1));
+      const edgeOpts = grid.setContext(me.getContext(me._ticksLength - 1));
       const lastLineWidth = edgeOpts.lineWidth;
       const borderValue = me._borderValue;
       let x1, x2, y1, y2;
@@ -1773,7 +1773,7 @@ export default class Scale extends Element {
     const me = this;
     const opts = me.options;
     const tz = opts.ticks && opts.ticks.z || 0;
-    const gz = opts.gridLines && opts.gridLines.z || 0;
+    const gz = opts.grid && opts.grid.z || 0;
 
     if (!me._isVisible() || tz === gz || me.draw !== Scale.prototype.draw) {
       // backward compatibility: draw has been overridden by custom scale

src/plugins/plugin.filler.js

@@ -148,7 +148,7 @@ function computeCircularBoundary(source) {
     value = scale.getBaseValue();
   }
 
-  if (options.gridLines.circular) {
+  if (options.grid.circular) {
     center = scale.getPointPositionForValue(0, start);
     return new simpleArc({
       x: center.x,