Move scale defining options up from ticks (#6738)

* Move scale defining options up from `ticks`
* Include `ticks.reverse` in v3-migration

Author: kurkle

docs/README.md

@@ -44,9 +44,7 @@ var myChart = new Chart(ctx, {
     options: {
         scales: {
             yAxes: [{
-                ticks: {
-                    beginAtZero: true
-                }
+                beginAtZero: true
             }]
         }
     }

docs/axes/README.md

@@ -5,6 +5,7 @@ Axes are an integral part of a chart. They are used to determine how data maps t
 In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/README.md#radial-axes).
 
 Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
+
 * Multiple X & Y axes are supported.
 * A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
 * Scale titles are supported.
@@ -21,6 +22,7 @@ The following properties are common to all axes provided by Chart.js.
 | `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
 
 ### Callbacks
+
 There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.
 
 | Name | Arguments | Description
@@ -48,11 +50,10 @@ For example, to set the minimum value of 0 for all linear scales, you would do t
 
 ```javascript
 Chart.scaleService.updateScaleDefaults('linear', {
-    ticks: {
-        min: 0
-    }
+    min: 0
 });
 ```
 
 ## Creating New Axes
+
 To create a new axis, see the [developer docs](../developers/axes.md).

docs/axes/cartesian/category.md

@@ -59,9 +59,7 @@ let chart = new Chart(ctx, {
     options: {
         scales: {
             xAxes: [{
-                ticks: {
-                    min: 'March'
-                }
+                min: 'March'
             }]
         }
     }

docs/axes/cartesian/linear.md

@@ -2,18 +2,23 @@
 
 The linear scale is use to chart numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
 
+## Configuration Options
+
+| Name | Type | Description
+| ---- | ---- | -----------
+| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
+| `suggestedMax` | `number` | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
+| `suggestedMin` | `number` | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
+
 ## Tick Configuration Options
 
 The following options are provided by the linear scale. They are all located in the `ticks` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `beginAtZero` | `boolean` | | if true, scale will include 0 if it is not already included.
 | `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
 | `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
 | `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
-| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
-| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
 
 ## Axis Range Settings
 
@@ -22,8 +27,8 @@ Given the number of axis range settings, it is important to understand how they
 The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
 
 ```javascript
-let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
-let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
+let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
+let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);
 ```
 
 In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
@@ -41,10 +46,8 @@ let chart = new Chart(ctx, {
     options: {
         scales: {
             yAxes: [{
-                ticks: {
-                    suggestedMin: 50,
-                    suggestedMax: 100
-                }
+                suggestedMin: 50,
+                suggestedMax: 100
             }]
         }
     }
@@ -54,6 +57,7 @@ let chart = new Chart(ctx, {
 In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
 
 ## Step Size
+
 If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
 
 This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
@@ -62,9 +66,9 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
 let options = {
     scales: {
         yAxes: [{
+            max: 5,
+            min: 0,
             ticks: {
-                max: 5,
-                min: 0,
                 stepSize: 0.5
             }
         }]

docs/axes/radial/linear.md

@@ -8,29 +8,30 @@ The following additional configuration options are provided by the radial linear
 
 The axis has configuration properties for ticks, angle lines (line that appear in a radar chart outward from the center), pointLabels (labels around the edge in a radar chart). The following sections define each of the properties in those sections.
 
-| Name | Type | Description
-| ---- | ---- | -----------
-| `angleLines` | `object` | Angle line configuration. [more...](#angle-line-options)
-| `gridLines` | `object` | Grid line configuration. [more...](../styling.md#grid-line-configuration)
-| `pointLabels` | `object` | Point label configuration. [more...](#point-label-options)
-| `ticks` | `object` | Tick configuration. [more...](#tick-options)
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
+| `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
+| `gridLines` | `object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration)
+| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
+| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
+| `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
+| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
+| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
+| `ticks` | `object` | | Tick configuration. [more...](#tick-options)
 
 ## Tick Options
+
 The following options are provided by the linear scale. They are all located in the `ticks` sub options. The [common tick configuration](../styling.md#tick-configuration) options are supported by this axis.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
 | `backdropPaddingX` | `number` | `2` | Horizontal padding of label backdrop.
 | `backdropPaddingY` | `number` | `2` | Vertical padding of label backdrop.
-| `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
-| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](#axis-range-settings)
-| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](#axis-range-settings)
 | `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
 | `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
 | `stepSize` | `number` | | User defined fixed step size for the scale. [more...](#step-size)
-| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
-| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
 | `showLabelBackdrop` | `boolean` | `true` | If true, draw a background behind the tick labels.
 
 ## Axis Range Settings
@@ -58,10 +59,8 @@ let chart = new Chart(ctx, {
     },
     options: {
         scale: {
-            ticks: {
-                suggestedMin: 50,
-                suggestedMax: 100
-            }
+            suggestedMin: 50,
+            suggestedMax: 100
         }
     }
 });
@@ -77,9 +76,9 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
 ```javascript
 let options = {
     scale: {
+        max: 5,
+        min: 0,
         ticks: {
-            max: 5,
-            min: 0,
             stepSize: 0.5
         }
     }

docs/charts/bar.md

@@ -42,16 +42,15 @@ A bar chart provides a way of showing data values represented as vertical bars.
     "options": {
         "scales": {
             "yAxes": [{
-                "ticks": {
-                    "beginAtZero": true
-                }
+                "beginAtZero": true
             }]
         }
     }
 }
 {% endchartjs %}
 
 ## Example Usage
+
 ```javascript
 var myBarChart = new Chart(ctx, {
     type: 'bar',
@@ -302,16 +301,15 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
     "options": {
         "scales": {
             "xAxes": [{
-                "ticks": {
-                    "beginAtZero": true
-                }
+                "beginAtZero": true
             }]
         }
     }
 }
 {% endchartjs %}
 
 ## Example
+
 ```javascript
 var myBarChart = new Chart(ctx, {
     type: 'horizontalBar',
@@ -321,6 +319,7 @@ var myBarChart = new Chart(ctx, {
 ```
 
 ### Config Options
+
 The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
 
 The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.

docs/charts/mixed.md

@@ -62,9 +62,7 @@ At this point we have a chart rendering how we'd like. It's important to note th
     "options": {
         "scales": {
             "yAxes": [{
-                "ticks": {
-                    "beginAtZero": true
-                }
+                "beginAtZero": true
             }]
         }
     }

docs/charts/radar.md

@@ -172,10 +172,8 @@ options = {
         angleLines: {
             display: false
         },
-        ticks: {
-            suggestedMin: 50,
-            suggestedMax: 100
-        }
+        suggestedMin: 50,
+        suggestedMax: 100
     }
 };
 ```

docs/getting-started/usage.md

@@ -54,9 +54,7 @@ var myChart = new Chart(ctx, {
     options: {
         scales: {
             yAxes: [{
-                ticks: {
-                    beginAtZero: true
-                }
+                beginAtZero: true
             }]
         }
     }

docs/getting-started/v3-migration.md

@@ -37,9 +37,15 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
 * `scales.[x/y]Axes.categoryPercentage` was moved to dataset option `categoryPercentage`
 * `scales.[x/y]Axes.minBarLength` was moved to dataset option `minBarLength`
 * `scales.[x/y]Axes.maxBarThickness` was moved to dataset option `maxBarThickness`
+* `scales.[x/y]Axes.ticks.beginAtZero` was renamed to `scales.[x/y]Axes.beginAtZero`
+* `scales.[x/y]Axes.ticks.max` was renamed to `scales.[x/y]Axes.max`
+* `scales.[x/y]Axes.ticks.min` was renamed to `scales.[x/y]Axes.min`
+* `scales.[x/y]Axes.ticks.reverse` was renamed to `scales.[x/y]Axes.reverse`
+* `scales.[x/y]Axes.ticks.suggestedMax` was renamed to `scales.[x/y]Axes.suggestedMax`
+* `scales.[x/y]Axes.ticks.suggestedMin` was renamed to `scales.[x/y]Axes.suggestedMin`
 * `scales.[x/y]Axes.time.format` was renamed to `scales.[x/y]Axes.time.parser`
-* `scales.[x/y]Axes.time.min` was renamed to `scales.[x/y]Axes.ticks.min`
-* `scales.[x/y]Axes.time.max` was renamed to `scales.[x/y]Axes.ticks.max`
+* `scales.[x/y]Axes.time.max` was renamed to `scales.[x/y]Axes.max`
+* `scales.[x/y]Axes.time.min` was renamed to `scales.[x/y]Axes.min`
 
 ## Developer migration
 

samples/charts/line/interpolation-modes.html

@@ -76,10 +76,8 @@
 							display: true,
 							labelString: 'Value'
 						},
-						ticks: {
-							suggestedMin: -10,
-							suggestedMax: 200,
-						}
+						suggestedMin: -10,
+						suggestedMax: 200,
 					}]
 				}
 			}

samples/charts/radar.html

@@ -72,9 +72,7 @@
 					text: 'Chart.js Radar Chart'
 				},
 				scale: {
-					ticks: {
-						beginAtZero: true
-					}
+					beginAtZero: true
 				}
 			}
 		};

samples/scales/gridlines-display.html

@@ -60,9 +60,9 @@
 						}],
 						yAxes: [{
 							gridLines: gridlines,
+							min: 0,
+							max: 100,
 							ticks: {
-								min: 0,
-								max: 100,
 								stepSize: 10
 							}
 						}]

samples/scales/gridlines-style.html

@@ -49,9 +49,9 @@
 							drawBorder: false,
 							color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
 						},
+						min: 0,
+						max: 100,
 						ticks: {
-							min: 0,
-							max: 100,
 							stepSize: 10
 						}
 					}]

samples/scales/linear/min-max-suggested.html

@@ -45,13 +45,11 @@
 				},
 				scales: {
 					yAxes: [{
-						ticks: {
-							// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
-							suggestedMin: 10,
+						// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
+						suggestedMin: 10,
 
-							// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
-							suggestedMax: 50
-						}
+						// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
+						suggestedMax: 50
 					}]
 				}
 			}

samples/scales/linear/min-max.html

@@ -45,10 +45,8 @@
 				},
 				scales: {
 					yAxes: [{
-						ticks: {
-							min: 10,
-							max: 50
-						}
+						min: 10,
+						max: 50
 					}]
 				}
 			}

samples/scales/linear/step-size.html

@@ -94,10 +94,9 @@
 							display: true,
 							labelString: 'Value'
 						},
+						min: 0,
+						max: 100,
 						ticks: {
-							min: 0,
-							max: 100,
-
 							// forces step size to be 5 units
 							stepSize: 5
 						}

samples/scales/non-numeric-y.html

@@ -54,9 +54,7 @@
 							display: true,
 							labelString: 'Request State'
 						},
-						ticks: {
-							reverse: true
-						}
+						reverse: true
 					}]
 				}
 			}