From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sat, 13 Mar 2021 17:49:09 +0000 (-0500)
Subject: Rename scale `gridLines` options to be clearer (#8628)
X-Git-Tag: v3.0.0-beta.14~20
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6ac89cbb252a6a0a383f2f85a332f3db87b6f3fc;p=thirdparty%2FChart.js.git

Rename scale `gridLines` options to be clearer (#8628)

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

* Rename `offsetGridLines` to `offset`
---

diff --git a/docs/docs/axes/_common.md b/docs/docs/axes/_common.md
index 1e9ba6450..057b4988f 100644
--- a/docs/docs/axes/_common.md
+++ b/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.
diff --git a/docs/docs/axes/styling.mdx b/docs/docs/axes/styling.mdx
index 6e6f479ca..e4f0bdf40 100644
--- a/docs/docs/axes/styling.mdx
+++ b/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.
diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index cce21feb2..555fe38e5 100644
--- a/docs/docs/charts/bar.mdx
+++ b/docs/docs/charts/bar.mdx
@@ -213,7 +213,7 @@ 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
 
@@ -221,15 +221,15 @@ The bar chart sets unique default values for the following configuration from th
 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.
 
diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index e0fcc7d72..1a21a275b 100644
--- a/docs/docs/getting-started/v3-migration.md
+++ b/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`.
diff --git a/samples/charts/bar/multi-axis.html b/samples/charts/bar/multi-axis.html
index c73f6fe81..30672f5c8 100644
--- a/samples/charts/bar/multi-axis.html
+++ b/samples/charts/bar/multi-axis.html
@@ -86,7 +86,7 @@
 							type: 'linear',
 							display: true,
 							position: 'right',
-							gridLines: {
+							grid: {
 								drawOnChartArea: false
 							}
 						},
diff --git a/samples/charts/line/multi-axis.html b/samples/charts/line/multi-axis.html
index 52b05d5c0..66c12e8d6 100644
--- a/samples/charts/line/multi-axis.html
+++ b/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
 							},
 						},
diff --git a/samples/charts/scatter/multi-axis.html b/samples/charts/scatter/multi-axis.html
index 0708b0188..63a031a61 100644
--- a/samples/charts/scatter/multi-axis.html
+++ b/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
 						}
 					}
diff --git a/samples/scales/financial.html b/samples/scales/financial.html
index 884753901..20a6a4371 100644
--- a/samples/scales/financial.html
+++ b/samples/scales/financial.html
@@ -173,7 +173,7 @@
 					},
 					y: {
 						type: 'linear',
-						gridLines: {
+						grid: {
 							drawBorder: false
 						},
 						title: {
diff --git a/samples/scales/gridlines-display.html b/samples/scales/gridlines-display.html
index 15d2639a9..83bec9305 100644
--- a/samples/scales/gridlines-display.html
+++ b/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);
 			});
 		};
diff --git a/samples/scales/gridlines-scriptable.html b/samples/scales/gridlines-scriptable.html
index b2c88d9a0..0d15d9980 100644
--- a/samples/scales/gridlines-scriptable.html
+++ b/samples/scales/gridlines-scriptable.html
@@ -47,7 +47,7 @@
 				},
 				scales: {
 					y: {
-						gridLines: {
+						grid: {
 							drawBorder: false,
 							color: function(context) {
 								if (context.tick.value > 0) {
diff --git a/samples/scales/gridlines-style.html b/samples/scales/gridlines-style.html
index 2386c275d..d71e5ae46 100644
--- a/samples/scales/gridlines-style.html
+++ b/samples/scales/gridlines-style.html
@@ -47,7 +47,7 @@
 				},
 				scales: {
 					y: {
-						gridLines: {
+						grid: {
 							drawBorder: false,
 							color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
 						},
diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index 2a8c6c8e0..54be96a96 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -535,8 +535,8 @@ BarController.overrides = {
     _index_: {
       type: 'category',
       offset: true,
-      gridLines: {
-        offsetGridLines: true
+      grid: {
+        offset: true
       }
     },
     _value_: {
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index 408ca22aa..b7c66cdc5 100644
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -187,7 +187,7 @@ PolarAreaController.overrides = {
         display: false
       },
       beginAtZero: true,
-      gridLines: {
+      grid: {
         circular: true
       },
       pointLabels: {
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index dcd3a7a64..1f413b5d9 100644
--- a/src/core/core.scale.js
+++ b/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,11 +1324,11 @@ 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;
@@ -1336,7 +1336,7 @@ export default class Scale extends Element {
       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
diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
index e91551c78..a7e4dfeac 100644
--- a/src/plugins/plugin.filler.js
+++ b/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,
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
index 17928a7e7..f6d9270b9 100644
--- a/src/scales/scale.radialLinear.js
+++ b/src/scales/scale.radialLinear.js
@@ -429,7 +429,7 @@ export default class RadialLinearScale extends LinearScaleBase {
 	 */
   drawBackground() {
     const me = this;
-    const {backgroundColor, gridLines: {circular}} = me.options;
+    const {backgroundColor, grid: {circular}} = me.options;
     if (backgroundColor) {
       const ctx = me.ctx;
       ctx.save();
@@ -449,7 +449,7 @@ export default class RadialLinearScale extends LinearScaleBase {
     const me = this;
     const ctx = me.ctx;
     const opts = me.options;
-    const {angleLines, gridLines} = opts;
+    const {angleLines, grid} = opts;
     const labelCount = me.getLabels().length;
 
     let i, offset, position;
@@ -458,11 +458,11 @@ export default class RadialLinearScale extends LinearScaleBase {
       drawPointLabels(me, labelCount);
     }
 
-    if (gridLines.display) {
+    if (grid.display) {
       me.ticks.forEach((tick, index) => {
         if (index !== 0) {
           offset = me.getDistanceFromCenterForValue(tick.value);
-          const optsAtIndex = gridLines.setContext(me.getContext(index - 1));
+          const optsAtIndex = grid.setContext(me.getContext(index - 1));
           drawRadiusLine(me, optsAtIndex, offset, labelCount);
         }
       });
@@ -574,7 +574,7 @@ RadialLinearScale.defaults = {
     borderDashOffset: 0.0
   },
 
-  gridLines: {
+  grid: {
     circular: false
   },
 
@@ -624,6 +624,6 @@ RadialLinearScale.defaultRoutes = {
 
 RadialLinearScale.descriptors = {
   angleLines: {
-    _fallback: 'gridLines'
+    _fallback: 'grid'
   }
 };
diff --git a/test/fixtures/core.scale/backgroundColor.js b/test/fixtures/core.scale/backgroundColor.js
index 47be5469f..2fc36beee 100644
--- a/test/fixtures/core.scale/backgroundColor.js
+++ b/test/fixtures/core.scale/backgroundColor.js
@@ -1,7 +1,7 @@
 const ticks = {
   display: false
 };
-const gridLines = {
+const grid = {
   display: false
 };
 const title = {
@@ -19,7 +19,7 @@ module.exports = {
           backgroundColor: 'red',
           position: 'top',
           ticks,
-          gridLines,
+          grid,
           title
         },
         left: {
@@ -27,7 +27,7 @@ module.exports = {
           backgroundColor: 'green',
           position: 'left',
           ticks,
-          gridLines,
+          grid,
           title
         },
         bottom: {
@@ -35,7 +35,7 @@ module.exports = {
           backgroundColor: 'blue',
           position: 'bottom',
           ticks,
-          gridLines,
+          grid,
           title
         },
         right: {
@@ -43,7 +43,7 @@ module.exports = {
           backgroundColor: 'gray',
           position: 'right',
           ticks,
-          gridLines,
+          grid,
           title
         },
       }
diff --git a/test/fixtures/core.scale/cartesian-axis-border-settings.json b/test/fixtures/core.scale/cartesian-axis-border-settings.json
index 3bcd930e8..135b04393 100644
--- a/test/fixtures/core.scale/cartesian-axis-border-settings.json
+++ b/test/fixtures/core.scale/cartesian-axis-border-settings.json
@@ -21,7 +21,7 @@
                     "axis": "x",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "borderColor": "blue",
                         "borderWidth": 5,
                         "color": "red",
@@ -36,7 +36,7 @@
                     "axis": "y",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
diff --git a/test/fixtures/core.scale/label-offset-vertical-axes.json b/test/fixtures/core.scale/label-offset-vertical-axes.json
index e16d43430..381955ace 100644
--- a/test/fixtures/core.scale/label-offset-vertical-axes.json
+++ b/test/fixtures/core.scale/label-offset-vertical-axes.json
@@ -14,7 +14,7 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
+                    "grid":{
                         "display": false,
                         "drawBorder": false
                     }
@@ -23,7 +23,7 @@
                     "ticks": {
                         "labelOffset": 25
                     },
-                    "gridLines":{
+                    "grid":{
                         "display": false,
                         "drawBorder": false
                     }
diff --git a/test/fixtures/core.scale/tick-drawing.json b/test/fixtures/core.scale/tick-drawing.json
index 12249616b..369bf88cd 100644
--- a/test/fixtures/core.scale/tick-drawing.json
+++ b/test/fixtures/core.scale/tick-drawing.json
@@ -15,7 +15,7 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
+                    "grid":{
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)"
@@ -27,7 +27,7 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
+                    "grid":{
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)"
@@ -43,8 +43,8 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
-                        "offsetGridLines": false,
+                    "grid":{
+                        "offset": false,
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)"
@@ -59,8 +59,8 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
-                        "offsetGridLines": false,
+                    "grid":{
+                        "offset": false,
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)"
diff --git a/test/fixtures/core.scale/tick-override-styles.json b/test/fixtures/core.scale/tick-override-styles.json
index 5932fc8dd..c79319011 100644
--- a/test/fixtures/core.scale/tick-override-styles.json
+++ b/test/fixtures/core.scale/tick-override-styles.json
@@ -15,7 +15,7 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
+                    "grid":{
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)",
@@ -34,8 +34,8 @@
                     "ticks": {
                         "display": false
                     },
-                    "gridLines":{
-                        "offsetGridLines": false,
+                    "grid":{
+                        "offset": false,
                         "drawOnChartArea": false,
                         "drawBorder": false,
                         "color": "rgba(0, 0, 0, 1)",
diff --git a/test/fixtures/core.scale/title/align-end.js b/test/fixtures/core.scale/title/align-end.js
index 81059cf94..f75f12e21 100644
--- a/test/fixtures/core.scale/title/align-end.js
+++ b/test/fixtures/core.scale/title/align-end.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -25,7 +25,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -40,7 +40,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -55,7 +55,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/title/align-start.js b/test/fixtures/core.scale/title/align-start.js
index 385f1725e..6ca37ffa4 100644
--- a/test/fixtures/core.scale/title/align-start.js
+++ b/test/fixtures/core.scale/title/align-start.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -25,7 +25,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -40,7 +40,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -55,7 +55,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/title/default.js b/test/fixtures/core.scale/title/default.js
index 9570d89bc..dfd1c469c 100644
--- a/test/fixtures/core.scale/title/default.js
+++ b/test/fixtures/core.scale/title/default.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -24,7 +24,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -38,7 +38,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -52,7 +52,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/title/multi-line/align-end.js b/test/fixtures/core.scale/title/multi-line/align-end.js
index b6d980b06..8e4ff0e8b 100644
--- a/test/fixtures/core.scale/title/multi-line/align-end.js
+++ b/test/fixtures/core.scale/title/multi-line/align-end.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -25,7 +25,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -40,7 +40,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -55,7 +55,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/title/multi-line/align-start.js b/test/fixtures/core.scale/title/multi-line/align-start.js
index c0e97cb07..fd6a4d6b5 100644
--- a/test/fixtures/core.scale/title/multi-line/align-start.js
+++ b/test/fixtures/core.scale/title/multi-line/align-start.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -25,7 +25,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -40,7 +40,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -55,7 +55,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/title/multi-line/default.js b/test/fixtures/core.scale/title/multi-line/default.js
index c320d0f69..28a9f3038 100644
--- a/test/fixtures/core.scale/title/multi-line/default.js
+++ b/test/fixtures/core.scale/title/multi-line/default.js
@@ -10,7 +10,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -24,7 +24,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -38,7 +38,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
@@ -52,7 +52,7 @@ module.exports = {
           ticks: {
             display: false
           },
-          gridLines: {
+          grid: {
             display: false
           },
           title: {
diff --git a/test/fixtures/core.scale/x-axis-position-center.json b/test/fixtures/core.scale/x-axis-position-center.json
index 8f3ec1409..4ecd78329 100644
--- a/test/fixtures/core.scale/x-axis-position-center.json
+++ b/test/fixtures/core.scale/x-axis-position-center.json
@@ -22,7 +22,7 @@
                     "axis": "x",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
@@ -35,7 +35,7 @@
                     "axis": "y",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
diff --git a/test/fixtures/core.scale/x-axis-position-dynamic.json b/test/fixtures/core.scale/x-axis-position-dynamic.json
index 9661dedd2..4a0be74b7 100644
--- a/test/fixtures/core.scale/x-axis-position-dynamic.json
+++ b/test/fixtures/core.scale/x-axis-position-dynamic.json
@@ -24,7 +24,7 @@
                     "axis": "x",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
@@ -37,7 +37,7 @@
                     "axis": "y",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
diff --git a/test/fixtures/core.scale/y-axis-position-center.json b/test/fixtures/core.scale/y-axis-position-center.json
index ff0cf28f9..e2128ad5c 100644
--- a/test/fixtures/core.scale/y-axis-position-center.json
+++ b/test/fixtures/core.scale/y-axis-position-center.json
@@ -22,7 +22,7 @@
                     "axis": "x",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
@@ -35,7 +35,7 @@
                     "axis": "y",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
diff --git a/test/fixtures/core.scale/y-axis-position-dynamic.json b/test/fixtures/core.scale/y-axis-position-dynamic.json
index 6e44d10fa..c3b63d3d3 100644
--- a/test/fixtures/core.scale/y-axis-position-dynamic.json
+++ b/test/fixtures/core.scale/y-axis-position-dynamic.json
@@ -22,7 +22,7 @@
                     "axis": "x",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
@@ -37,7 +37,7 @@
                     "axis": "y",
                     "min": -100,
                     "max": 100,
-                    "gridLines": {
+                    "grid": {
                         "color": "red",
                         "drawOnChartArea": false
                     },
diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json
index cee537e64..ecfa8fcd5 100644
--- a/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json
+++ b/test/fixtures/plugin.filler/fill-radar-boundary-end-circular.json
@@ -28,7 +28,7 @@
       "scales": {
         "r": {
           "display": false,
-          "gridLines": {
+          "grid": {
             "circular": true
           }
         }
diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json
index d479c28a9..f234fd5c2 100644
--- a/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json
+++ b/test/fixtures/plugin.filler/fill-radar-boundary-origin-circular.json
@@ -28,7 +28,7 @@
       "scales": {
         "r": {
           "display": false,
-          "gridLines": {
+          "grid": {
             "circular": true
           }
         }
diff --git a/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json b/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json
index f10119f7a..51d08ad4a 100644
--- a/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json
+++ b/test/fixtures/plugin.filler/fill-radar-boundary-start-circular.json
@@ -28,7 +28,7 @@
       "scales": {
         "r": {
           "display": false,
-          "gridLines": {
+          "grid": {
             "circular": true
           }
         }
diff --git a/test/fixtures/plugin.filler/fill-radar-value.json b/test/fixtures/plugin.filler/fill-radar-value.json
index 882b536ba..8a62822f5 100644
--- a/test/fixtures/plugin.filler/fill-radar-value.json
+++ b/test/fixtures/plugin.filler/fill-radar-value.json
@@ -16,7 +16,7 @@
       "scales": {
         "r": {
           "display": false,
-          "gridLines": {
+          "grid": {
             "circular": true
           }
         }
diff --git a/test/fixtures/scale.radialLinear/anglelines-disable.json b/test/fixtures/scale.radialLinear/anglelines-disable.json
index 2551b69a1..ac1585d60 100644
--- a/test/fixtures/scale.radialLinear/anglelines-disable.json
+++ b/test/fixtures/scale.radialLinear/anglelines-disable.json
@@ -8,7 +8,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "color": "rgb(0, 0, 0)",
             "lineWidth": 1
           },
diff --git a/test/fixtures/scale.radialLinear/anglelines-indexable.js b/test/fixtures/scale.radialLinear/anglelines-indexable.js
index df62588bd..8430a5ebc 100644
--- a/test/fixtures/scale.radialLinear/anglelines-indexable.js
+++ b/test/fixtures/scale.radialLinear/anglelines-indexable.js
@@ -8,7 +8,7 @@ module.exports = {
       responsive: false,
       scales: {
         r: {
-          gridLines: {
+          grid: {
             display: true,
           },
           angleLines: {
diff --git a/test/fixtures/scale.radialLinear/anglelines-scriptable.js b/test/fixtures/scale.radialLinear/anglelines-scriptable.js
index a3d97d103..170dbfd79 100644
--- a/test/fixtures/scale.radialLinear/anglelines-scriptable.js
+++ b/test/fixtures/scale.radialLinear/anglelines-scriptable.js
@@ -8,7 +8,7 @@ module.exports = {
       responsive: false,
       scales: {
         r: {
-          gridLines: {
+          grid: {
             display: true,
           },
           angleLines: {
diff --git a/test/fixtures/scale.radialLinear/border-dash.json b/test/fixtures/scale.radialLinear/border-dash.json
index ec683c4c6..5aac48637 100644
--- a/test/fixtures/scale.radialLinear/border-dash.json
+++ b/test/fixtures/scale.radialLinear/border-dash.json
@@ -8,7 +8,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "color": "rgba(0, 0, 255, 0.5)",
             "lineWidth": 1,
             "borderDash": [4, 2],
diff --git a/test/fixtures/scale.radialLinear/circular-backgroundColor.js b/test/fixtures/scale.radialLinear/circular-backgroundColor.js
index 5e21f244e..0e47fe0b0 100644
--- a/test/fixtures/scale.radialLinear/circular-backgroundColor.js
+++ b/test/fixtures/scale.radialLinear/circular-backgroundColor.js
@@ -21,7 +21,7 @@ module.exports = {
           backgroundColor: '#00FF00',
           min: 0,
           max: 3,
-          gridLines: {
+          grid: {
             circular: true
           },
           pointLabels: {
diff --git a/test/fixtures/scale.radialLinear/circular-border-dash.json b/test/fixtures/scale.radialLinear/circular-border-dash.json
index c6b0ad5f9..844b52662 100644
--- a/test/fixtures/scale.radialLinear/circular-border-dash.json
+++ b/test/fixtures/scale.radialLinear/circular-border-dash.json
@@ -8,7 +8,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "circular": true,
             "color": "rgba(0, 0, 255, 0.5)",
             "lineWidth": 1,
diff --git a/test/fixtures/scale.radialLinear/gridlines-disable.json b/test/fixtures/scale.radialLinear/gridlines-disable.json
index 45f8b8b12..34ddf053b 100644
--- a/test/fixtures/scale.radialLinear/gridlines-disable.json
+++ b/test/fixtures/scale.radialLinear/gridlines-disable.json
@@ -8,7 +8,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "display": false
           },
           "angleLines": {
diff --git a/test/fixtures/scale.radialLinear/gridlines-no-z.json b/test/fixtures/scale.radialLinear/gridlines-no-z.json
index 6252753b3..c2ee60596 100644
--- a/test/fixtures/scale.radialLinear/gridlines-no-z.json
+++ b/test/fixtures/scale.radialLinear/gridlines-no-z.json
@@ -14,7 +14,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "color": "rgba(0, 0, 0, 1)",
             "lineWidth": 1
           },
diff --git a/test/fixtures/scale.radialLinear/gridlines-scriptable.js b/test/fixtures/scale.radialLinear/gridlines-scriptable.js
index 535433fed..9c21e30cf 100644
--- a/test/fixtures/scale.radialLinear/gridlines-scriptable.js
+++ b/test/fixtures/scale.radialLinear/gridlines-scriptable.js
@@ -8,7 +8,7 @@ module.exports = {
       responsive: false,
       scales: {
         r: {
-          gridLines: {
+          grid: {
             display: true,
             color: function(context) {
               return context.index % 2 === 0 ? 'green' : 'red';
diff --git a/test/fixtures/scale.radialLinear/gridlines-z.json b/test/fixtures/scale.radialLinear/gridlines-z.json
index 70b1e456a..17aed68a2 100644
--- a/test/fixtures/scale.radialLinear/gridlines-z.json
+++ b/test/fixtures/scale.radialLinear/gridlines-z.json
@@ -14,7 +14,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "color": "rgba(0, 0, 0, 1)",
             "lineWidth": 1,
             "z": 1
diff --git a/test/fixtures/scale.radialLinear/indexable-gridlines.json b/test/fixtures/scale.radialLinear/indexable-gridlines.json
index 8c8dde5ce..7aaae2b2a 100644
--- a/test/fixtures/scale.radialLinear/indexable-gridlines.json
+++ b/test/fixtures/scale.radialLinear/indexable-gridlines.json
@@ -8,7 +8,7 @@
       "responsive": false,
       "scales": {
         "r": {
-          "gridLines": {
+          "grid": {
             "display": true,
             "color": [
               "rgba(0, 0, 0, 0.5)",
diff --git a/test/fixtures/scale.timeseries/financial-daily.js b/test/fixtures/scale.timeseries/financial-daily.js
index 66adfcfd8..249572f2b 100644
--- a/test/fixtures/scale.timeseries/financial-daily.js
+++ b/test/fixtures/scale.timeseries/financial-daily.js
@@ -45,7 +45,7 @@ module.exports = {
         },
         y: {
           type: 'linear',
-          gridLines: {
+          grid: {
             drawBorder: false
           }
         }
diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js
index 0f337671b..93a046186 100644
--- a/test/specs/core.scale.tests.js
+++ b/test/specs/core.scale.tests.js
@@ -130,8 +130,8 @@ describe('Core.scale', function() {
         options: {
           scales: {
             x: {
-              gridLines: {
-                offsetGridLines: test.offsetGridLines,
+              grid: {
+                offset: test.offsetGridLines,
                 drawTicks: false
               },
               ticks: {
@@ -178,8 +178,8 @@ describe('Core.scale', function() {
             },
             y: {
               type: 'category',
-              gridLines: {
-                offsetGridLines: test.offsetGridLines,
+              grid: {
+                offset: test.offsetGridLines,
                 drawTicks: false
               },
               ticks: {
@@ -466,7 +466,7 @@ describe('Core.scale', function() {
           scales: {
             x: {
               type: 'customScale',
-              gridLines: {
+              grid: {
                 z: 10
               },
               ticks: {
@@ -492,7 +492,7 @@ describe('Core.scale', function() {
               ticks: {
                 z: 10
               },
-              gridLines: {
+              grid: {
                 z: 10
               }
             }
@@ -528,7 +528,7 @@ describe('Core.scale', function() {
           scales: {
             x: {
               type: 'linear',
-              gridLines: {
+              grid: {
                 z: 11
               }
             }
@@ -547,7 +547,7 @@ describe('Core.scale', function() {
               ticks: {
                 z: 10
               },
-              gridLines: {
+              grid: {
                 z: 11
               }
             }
diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js
index 58932da3f..364cbe76b 100644
--- a/test/specs/scale.linear.tests.js
+++ b/test/specs/scale.linear.tests.js
@@ -953,7 +953,7 @@ describe('Linear Scale', function() {
           },
           y: {
             type: 'linear',
-            gridLines: {
+            grid: {
               drawTicks: false,
               drawBorder: false
             },
diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js
index 818d0f3de..d4ef2a779 100644
--- a/test/specs/scale.radialLinear.tests.js
+++ b/test/specs/scale.radialLinear.tests.js
@@ -27,7 +27,7 @@ describe('Test the radial linear scale', function() {
         borderDashOffset: 0.0
       },
 
-      gridLines: {
+      grid: {
         circular: false
       },
 
diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
index 219e0fba6..9d0ed4a24 100644
--- a/test/specs/scale.time.tests.js
+++ b/test/specs/scale.time.tests.js
@@ -1101,7 +1101,7 @@ describe('Time scale tests', function() {
           },
           y: {
             type: 'linear',
-            gridLines: {
+            grid: {
               drawBorder: false
             }
           }
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index c19471055..0f4739da6 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2619,7 +2619,7 @@ export interface GridLineOptions {
   /**
    * @default false
    */
-  offsetGridLines: boolean;
+  offset: boolean;
 }
 
 export interface TickOptions {
@@ -2696,7 +2696,7 @@ export interface CartesianScaleOptions extends CoreScaleOptions {
    */
   offset: boolean;
 
-  gridLines: GridLineOptions;
+  grid: GridLineOptions;
 
   title: {
     display: boolean;
@@ -2993,7 +2993,7 @@ export type RadialLinearScaleOptions = CoreScaleOptions & {
    */
   beginAtZero: boolean;
 
-  gridLines: GridLineOptions;
+  grid: GridLineOptions;
 
   /**
    * User defined minimum number for the scale, overrides minimum value from data.