Convert axis options from arrays to objects (#6773)

* Convert axis options from arrays to objects

* Updated all chart type defaults
* Throw errors when axis type or position are not specified
* Avoid raising unnecessary errors when merging options into the default configs

* Fix additional tests

* Ensure scale defaults are set if type is not explicitly defined

* Another step

* Include `scale` as `firstIDs.r`

* update docs

* Update for buildOrUpdateScales

* Update migration guide

* Add test back

Author: kurkle

docs/README.md

@@ -43,9 +43,9 @@ var myChart = new Chart(ctx, {
     },
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 beginAtZero: true
-            }]
+            }
         }
     }
 });

docs/axes/cartesian/README.md

@@ -38,7 +38,8 @@ The following options are common to all cartesian axes but do not apply to other
 | `padding` | `number` | `0` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
 
 ### Axis ID
-The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used.
+
+The properties `dataset.xAxisID` or `dataset.yAxisID` have to match to `scales` property. This is especially needed if multi-axes charts are used.
 
 ```javascript
 var myChart = new Chart(ctx, {
@@ -54,11 +55,10 @@ var myChart = new Chart(ctx, {
     },
     options: {
         scales: {
-            yAxes: [{
-                id: 'first-y-axis',
+            'first-y-axis': {
                 type: 'linear'
-            }, {
-                id: 'second-y-axis',
+            },
+            'second-y-axis': {
                 type: 'linear'
             }]
         }
@@ -93,12 +93,11 @@ var myChart = new Chart(ctx, {
     },
     options: {
         scales: {
-            yAxes: [{
-                id: 'left-y-axis',
+            'left-y-axis': {
                 type: 'linear',
                 position: 'left'
-            }, {
-                id: 'right-y-axis',
+            },
+            'right-y-axis': {
                 type: 'linear',
                 position: 'right'
             }]

docs/axes/cartesian/category.md

@@ -25,10 +25,10 @@ let chart = new Chart(ctx, {
     data: ...
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 type: 'category',
                 labels: ['January', 'February', 'March', 'April', 'May', 'June']
-            }]
+            }
         }
     }
 });
@@ -58,9 +58,9 @@ let chart = new Chart(ctx, {
     },
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 min: 'March'
-            }]
+            }
         }
     }
 });

docs/axes/cartesian/linear.md

@@ -45,10 +45,10 @@ let chart = new Chart(ctx, {
     },
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 suggestedMin: 50,
                 suggestedMax: 100
-            }]
+            }
         }
     }
 });
@@ -65,13 +65,13 @@ This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5
 ```javascript
 let options = {
     scales: {
-        yAxes: [{
+        y: {
             max: 5,
             min: 0,
             ticks: {
                 stepSize: 0.5
             }
-        }]
+        }
     }
 };
 ```

docs/axes/cartesian/time.md

@@ -67,18 +67,19 @@ var chart = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 type: 'time',
                 time: {
                     unit: 'month'
                 }
-            }]
+            }
         }
     }
 });
 ```
 
 ### Display Formats
+
 The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See [Moment.js](https://momentjs.com/docs/#/displaying/format/) for the allowable format strings.
 
 Name | Default | Example
@@ -101,14 +102,14 @@ var chart = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 type: 'time',
                 time: {
                     displayFormats: {
                         quarter: 'MMM YYYY'
                     }
                 }
-            }]
+            }
         }
     }
 });
@@ -127,10 +128,10 @@ var chart = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 type: 'time',
                 distribution: 'series'
-            }]
+            }
         }
     }
 });

docs/axes/labelling.md

@@ -31,14 +31,14 @@ var chart = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 ticks: {
                     // Include a dollar sign in the ticks
                     callback: function(value, index, values) {
                         return '$' + value;
                     }
                 }
-            }]
+            }
         }
     }
 });

docs/charts/bar.md

@@ -41,9 +41,9 @@ A bar chart provides a way of showing data values represented as vertical bars.
     },
     "options": {
         "scales": {
-            "yAxes": [{
+            "y": {
                 "beginAtZero": true
-            }]
+            }
         }
     }
 }
@@ -160,14 +160,17 @@ data: {
     }]
 };
 ```
+
 ### barThickness
+
 If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
 
 If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
 
 If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
 
 ## Scale Configuration
+
 The bar chart sets unique default values for the following configuration from the associated `scale` options:
 
 | Name | Type | Default | Description
@@ -180,16 +183,17 @@ The bar chart sets unique default values for the following configuration from th
 ```javascript
 options = {
     scales: {
-        xAxes: [{
+        x: {
             gridLines: {
                 offsetGridLines: true
             }
-        }]
+        }
     }
 };
 ```
 
 ### offsetGridLines
+
 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.
 
 ## Default Options
@@ -249,12 +253,12 @@ var stackedBar = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 stacked: true
-            }],
-            yAxes: [{
+            },
+            y: {
                 stacked: true
-            }]
+            }
         }
     }
 });
@@ -267,6 +271,7 @@ The following dataset properties are specific to stacked bar charts.
 | `stack` | `string` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack).
 
 ## Horizontal Bar Chart
+
 A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
 {% chartjs %}
 {
@@ -300,9 +305,9 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
     },
     "options": {
         "scales": {
-            "xAxes": [{
+            "x": {
                 "beginAtZero": true
-            }]
+            }
         }
     }
 }

docs/charts/line.md

@@ -211,9 +211,9 @@ var stackedLine = new Chart(ctx, {
     data: data,
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 stacked: true
-            }]
+            }
         }
     }
 });

docs/charts/mixed.md

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

docs/charts/scatter.md

@@ -22,10 +22,10 @@ var scatterChart = new Chart(ctx, {
     },
     options: {
         scales: {
-            xAxes: [{
+            x: {
                 type: 'linear',
                 position: 'bottom'
-            }]
+            }
         }
     }
 });

docs/developers/axes.md

@@ -24,9 +24,9 @@ var lineChart = new Chart(ctx, {
     type: 'line',
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 type: 'myScale' // this is the same key that was passed to the registerScaleType function
-            }]
+            }
         }
     }
 });

docs/developers/updates.md

@@ -45,12 +45,12 @@ function updateConfigAsNewObject(chart) {
             text: 'Chart.js'
         },
         scales: {
-            xAxes: [{
+            x: {
                 display: true
-            }],
-            yAxes: [{
+            },
+            y: {
                 display: true
-            }]
+            }
         }
     };
     chart.update();
@@ -64,30 +64,29 @@ Variables referencing any one from `chart.scales` would be lost after updating s
 
 ```javascript
 function updateScales(chart) {
-    var xScale = chart.scales['x-axis-0'];
-    var yScale = chart.scales['y-axis-0'];
+    var xScale = chart.scales.x;
+    var yScale = chart.scales.y;
     chart.options.scales = {
-        xAxes: [{
-            id: 'newId',
+        newId: {
             display: true
-        }],
-        yAxes: [{
+        },
+        y: {
             display: true,
             type: 'logarithmic'
-        }]
+        }
     };
     chart.update();
     // need to update the reference
-    xScale = chart.scales['newId'];
-    yScale = chart.scales['y-axis-0'];
+    xScale = chart.scales.newId;
+    yScale = chart.scales.y;
 }
 ```
 
-You can also update a specific scale either by specifying its index or id.
+You can also update a specific scale either by its id.
 
 ```javascript
 function updateScale(chart) {
-    chart.options.scales.yAxes[0] = {
+    chart.options.scales.y = {
         type: 'logarithmic'
     };
     chart.update();

docs/getting-started/usage.md

@@ -53,9 +53,9 @@ var myChart = new Chart(ctx, {
     },
     options: {
         scales: {
-            yAxes: [{
+            y: {
                 beginAtZero: true
-            }]
+            }
         }
     }
 });