Rename scale gridLines options to be clearer (#8628)

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

* Rename `offsetGridLines` to `offset`

Author: etimberg

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) {