Relocate chart type and dataset type defaults (#8563)

* Relocate chart type and dataset type defaults

* Update types

* Separate overrides and descriptors

* Update derived sample, use merge for inherit

* Don't merge overrides

* Review update

docs/docs/charts/bar.mdx

@@ -235,7 +235,7 @@ If true, the bars for a particular data point fall between the grid lines. The g
 
 ## Default Options
 
-It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in `Chart.defaults.controllers.bar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
+It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in `Chart.overrides.bar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
 
 ## barPercentage vs categoryPercentage
 

docs/docs/charts/bubble.mdx

@@ -106,7 +106,7 @@ All these values, if `undefined`, fallback to the associated [`elements.point.*`
 
 ## Default Options
 
-We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at `Chart.defaults.controllers.bubble`.
+We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at `Chart.overrides.bubble`.
 
 ## Data Structure
 

docs/docs/charts/doughnut.mdx

@@ -172,7 +172,7 @@ These are the customisation options specific to Pie & Doughnut charts. These opt
 
 ## Default Options
 
-We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.controllers.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.controllers.pie`, with the only difference being `cutout` being set to 0.
+We can also change these default values for each Doughnut type that is created, this object is available at `Chart.overrides.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.overrides.pie`, with the only difference being `cutout` being set to 0.
 
 ## Data Structure
 

docs/docs/charts/line.mdx

@@ -188,12 +188,12 @@ The line chart defines the following configuration options. These options are lo
 
 ## Default Options
 
-It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.defaults.controllers.line`. Changing the global options only affects charts created after the change. Existing charts are not changed.
+It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.overrides.line`. Changing the global options only affects charts created after the change. Existing charts are not changed.
 
 For example, to configure all line charts with `spanGaps = true` you would do:
 
 ```javascript
-Chart.defaults.controllers.line.spanGaps = true;
+Chart.overrides.line.spanGaps = true;
 ```
 
 ## Data Structure

docs/docs/charts/polar.mdx

@@ -120,12 +120,12 @@ The polar area chart uses the [radialLinear](../axes/radial/linear.mdx) scale. A
 
 ## Default Options
 
-We can also change these default values for each PolarArea type that is created, this object is available at `Chart.defaults.controllers.polarArea`. Changing the global options only affects charts created after the change. Existing charts are not changed.
+We can also change these default values for each PolarArea type that is created, this object is available at `Chart.overrides.polarArea`. Changing the global options only affects charts created after the change. Existing charts are not changed.
 
 For example, to configure all new polar area charts with `animateScale = false` you would do:
 
 ```javascript
-Chart.defaults.controllers.polarArea.animation.animateScale = false;
+Chart.overrides.polarArea.animation.animateScale = false;
 ```
 
 ## Data Structure

docs/docs/charts/radar.mdx

@@ -193,7 +193,7 @@ options = {
 
 ## Default Options
 
-It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in `Chart.defaults.controllers.radar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
+It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in `Chart.overrides.radar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
 
 ## Data Structure
 

docs/docs/configuration/animations.mdx

@@ -86,7 +86,7 @@ function example() {
               y: {
                   from: 0
               }
-            }  
+            }
           },
           hide: {
             animations: {
@@ -124,9 +124,8 @@ Animation configuration consists of 3 keys.
 These keys can be configured in following paths:
 
 * `` - chart options
-* `controllers[type]` - controller type options
-* `controllers[type].datasets` - dataset type options
 * `datasets[type]` - dataset type options
+* `overrides[type]` - chart type options
 
 These paths are valid under `defaults` for global confuguration and `options` for instance configuration.
 

docs/docs/configuration/index.md

@@ -42,7 +42,7 @@ The following example would set the `showLine` option to 'false' for all line da
 
 ```javascript
 // Do not show lines for all datasets by default
-Chart.defaults.controllers.line.showLine = false;
+Chart.defaults.datasets.line.showLine = false;
 
 // This chart would show a line only for the third dataset
 var chart = new Chart(ctx, {

docs/docs/general/options.md

@@ -9,7 +9,7 @@ Options are resolved from top to bottom, using a context dependent route.
 ### Chart level options
 
 * options
-* defaults.controllers[`config.type`]
+* overrides[`config.type`]
 * defaults
 
 ### Dataset level options
@@ -18,18 +18,18 @@ Options are resolved from top to bottom, using a context dependent route.
 
 * dataset
 * options.datasets[`dataset.type`]
-* options.controllers[`dataset.type`].datasets
 * options
+* overrides[`config.type`].datasets[`dataset.type`]
 * defaults.datasets[`dataset.type`]
-* defaults.controllers[`dataset.type`].datasets
 * defaults
 
 ### Dataset animation options
 
 * dataset.animation
-* options.controllers[`dataset.type`].datasets.animation
+* options.datasets[`dataset.type`].animation
 * options.animation
-* defaults.controllers[`dataset.type`].datasets.animation
+* overrides[`config.type`].datasets[`dataset.type`].animation
+* defaults.datasets[`dataset.type`].animation
 * defaults.animation
 
 ### Dataset element level options
@@ -38,31 +38,30 @@ Each scope is looked up with `elementType` prefix in the option name first, then
 
 * dataset
 * options.datasets[`dataset.type`]
-* options.controllers[`dataset.type`].datasets
-* options.controllers[`dataset.type`].elements[`elementType`]
+* options.datasets[`dataset.type`].elements[`elementType`]
 * options.elements[`elementType`]
 * options
+* overrides[`config.type`].datasets[`dataset.type`]
+* overrides[`config.type`].datasets[`dataset.type`].elements[`elementType`]
 * defaults.datasets[`dataset.type`]
-* defaults.controllers[`dataset.type`].datasets
-* defaults.controllers[`dataset.type`].elements[`elementType`]
+* defaults.datasets[`dataset.type`].elements[`elementType`]
 * defaults.elements[`elementType`]
 * defaults
 
 ### Scale options
 
 * options.scales
-* defaults.controllers[`config.type`].scales
-* defaults.controllers[`dataset.type`].scales
+* overrides[`config.type`].scales
 * defaults.scales
+* defaults.scale
 
 ### Plugin options
 
 A plugin can provide `additionalOptionScopes` array of paths to additionally look for its options in. For root scope, use empty string: `''`. Most core plugins also take options from root scope.
 
 * options.plugins[`plugin.id`]
-* options.controllers[`config.type`].plugins[`plugin.id`]
 * (options.[`...plugin.additionalOptionScopes`])
-* defaults.controllers[`config.type`].plugins[`plugin.id`]
+* overrides[`config.type`].plugins[`plugin.id`]
 * defaults.plugins[`plugin.id`]
 * (defaults.[`...plugin.additionalOptionScopes`])
 

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

@@ -111,7 +111,7 @@ A number of changes were made to the configuration options passed to the `Chart`
 #### Defaults
 
 * `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults`
-* Dataset controller defaults were relocate to `controllers`. For example `Chart.defaults.line` is now `Chart.defaults.controllers.line`
+* Dataset controller defaults were relocate to `overrides`. For example `Chart.defaults.line` is now `Chart.overrides.line`
 * `default` prefix was removed from defaults. For example `Chart.defaults.global.defaultColor` is now `Chart.defaults.color`
 * `defaultColor` was split to `color`, `borderColor` and `backgroundColor`
 * `defaultFontColor` was renamed to `color`

samples/advanced/derived-chart-type.html

@@ -24,7 +24,7 @@
 				// Call bubble controller method to draw all the points
 				super.draw(arguments);
 
-				// Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset
+				// Now we can do some custom drawing for this dataset. Here we'll draw a box around the first point in each dataset, using `boxStrokeStyle` dataset option for color
 				var meta = this.getMeta();
 				var pt0 = meta.data[0];
 
@@ -33,14 +33,19 @@
 
 				var ctx = this.chart.ctx;
 				ctx.save();
-				ctx.strokeStyle = 'red';
+				ctx.strokeStyle = this.options.boxStrokeStyle;
 				ctx.lineWidth = 1;
 				ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
 				ctx.restore();
 			}
 		}
 		Custom.id = 'derivedBubble';
-		Custom.defaults = Chart.controllers.bubble.defaults;
+		Custom.defaults = {
+			// Custom defaults. Bubble defaults are inherited.
+			boxStrokeStyle: 'red'
+		};
+		// Overrides are only inherited, but not merged if defined
+		// Custom.overrides = Chart.overrides.bubble;
 
 		// Stores the controller so that the chart initialization routine can look it up
 		Chart.register(Custom);

samples/charts/multi-series-pie.html

@@ -48,7 +48,7 @@
 						labels: {
 							generateLabels: function(chart) {
 								// Get the default label list
-								var original = Chart.defaults.controllers.pie.plugins.legend.labels.generateLabels;
+								var original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
 								var labels = original.call(this, chart);
 
 								// Build an array of colors used in the datasets of the chart

src/controllers/controller.bar.js

@@ -511,23 +511,27 @@ BarController.defaults = {
   datasetElementType: false,
   dataElementType: 'bar',
 
+  categoryPercentage: 0.8,
+  barPercentage: 0.9,
+
+  animations: {
+    numbers: {
+      type: 'number',
+      properties: ['x', 'y', 'base', 'width', 'height']
+    }
+  }
+};
+
+/**
+ * @type {any}
+ */
+BarController.overrides = {
   interaction: {
     mode: 'index'
   },
 
   hover: {},
 
-  datasets: {
-    categoryPercentage: 0.8,
-    barPercentage: 0.9,
-    animations: {
-      numbers: {
-        type: 'number',
-        properties: ['x', 'y', 'base', 'width', 'height']
-      }
-    }
-  },
-
   scales: {
     _index_: {
       type: 'category',

src/controllers/controller.bubble.js

@@ -133,12 +133,19 @@ BubbleController.id = 'bubble';
 BubbleController.defaults = {
   datasetElementType: false,
   dataElementType: 'point',
+
   animations: {
     numbers: {
       type: 'number',
       properties: ['x', 'y', 'borderWidth', 'radius']
     }
-  },
+  }
+};
+
+/**
+ * @type {any}
+ */
+BubbleController.overrides = {
   scales: {
     x: {
       type: 'linear'

src/controllers/controller.doughnut.js

@@ -328,23 +328,26 @@ DoughnutController.defaults = {
       properties: ['circumference', 'endAngle', 'innerRadius', 'outerRadius', 'startAngle', 'x', 'y', 'offset', 'borderWidth']
     },
   },
-  aspectRatio: 1,
-
-  datasets: {
-    // The percentage of the chart that we cut out of the middle.
-    cutout: '50%',
+  // The percentage of the chart that we cut out of the middle.
+  cutout: '50%',
 
-    // The rotation of the chart, where the first data arc begins.
-    rotation: 0,
+  // The rotation of the chart, where the first data arc begins.
+  rotation: 0,
 
-    // The total circumference of the chart.
-    circumference: 360,
+  // The total circumference of the chart.
+  circumference: 360,
 
-    // The outr radius of the chart
-    radius: '100%'
-  },
+  // The outr radius of the chart
+  radius: '100%',
 
   indexAxis: 'r',
+};
+
+/**
+ * @type {any}
+ */
+DoughnutController.overrides = {
+  aspectRatio: 1,
 
   // Need to override these to give a nice default
   plugins: {

src/controllers/controller.line.js

@@ -111,11 +111,14 @@ LineController.defaults = {
   datasetElementType: 'line',
   dataElementType: 'point',
 
-  datasets: {
-    showLine: true,
-    spanGaps: false,
-  },
+  showLine: true,
+  spanGaps: false,
+};
 
+/**
+ * @type {any}
+ */
+LineController.overrides = {
   interaction: {
     mode: 'index'
   },

src/controllers/controller.pie.js

@@ -11,17 +11,15 @@ PieController.id = 'pie';
  * @type {any}
  */
 PieController.defaults = {
-  datasets: {
-    // The percentage of the chart that we cut out of the middle.
-    cutout: 0,
+  // The percentage of the chart that we cut out of the middle.
+  cutout: 0,
 
-    // The rotation of the chart, where the first data arc begins.
-    rotation: 0,
+  // The rotation of the chart, where the first data arc begins.
+  rotation: 0,
 
-    // The total circumference of the chart.
-    circumference: 360,
+  // The total circumference of the chart.
+  circumference: 360,
 
-    // The outr radius of the chart
-    radius: '100%'
-  }
+  // The outr radius of the chart
+  radius: '100%'
 };