Clarify options placement

docs/docs/axes/_common.md

@@ -1,4 +1,5 @@
 ### Common options to all axes
+The common scale configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/_common_ticks.md

@@ -1,4 +1,5 @@
 ### Common tick options to all axes
+The common tick options can be configured in the `options.scales[scaleId].ticks` namespace
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | :-------------------------------: | ------- | -----------

docs/docs/axes/cartesian/_common.md

@@ -1,4 +1,5 @@
 ### Common options to all cartesian axes
+The common scale configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/cartesian/_common_ticks.md

@@ -1,4 +1,5 @@
 ### Common tick options to all cartesian axes
+The common tick configuration can be adjusted in the `options.scales[scaleId].ticks` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/cartesian/category.mdx

@@ -45,6 +45,7 @@ let chart = new Chart(ctx, {
 ## Configuration Options
 
 ### Category Axis specific options
+The category scale specific configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Description
 | ---- | ---- | -----------

docs/docs/axes/cartesian/linear.mdx

@@ -23,6 +23,7 @@ The linear scale is used to chart numerical data. It can be placed on either the
 ## Tick Configuration
 
 ### Linear Axis specific options
+The linear scale specific configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/cartesian/logarithmic.mdx

@@ -17,6 +17,7 @@ The logarithmic scale is used to chart numerical data. It can be placed on eithe
 ## Tick Configuration
 
 ### Logarithmic Axis specific options
+The logarithmic scale specific configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/cartesian/time.mdx

@@ -25,6 +25,7 @@ When providing data for the time scale, Chart.js uses timestamps defined as mill
 ## Configuration Options
 
 ### Time Axis specific options
+The time scale specific configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/index.mdx

@@ -64,6 +64,8 @@ In contrast to the `suggested*` settings, the `min` and `max` settings set expli
 
 There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. The options are supplied at the top level of the axis options.
 
+The callbacks configuration can be adjusted in the `options.scales[scaleId]` namespace.
+
 | Name | Arguments | Description
 | ---- | --------- | -----------
 | `beforeUpdate` | `axis` | Callback called before the update process starts.

docs/docs/axes/labelling.md

@@ -6,7 +6,7 @@ When creating a chart, you want to tell the viewer what data they are viewing. T
 
 ## Scale Title Configuration
 
-The scale label configuration is nested under the scale configuration in the `scaleLabel` key. It defines options for the scale title. Note that this only applies to cartesian axes.
+The scale label configuration can be adjusted in the `options.scales[scaleId].scaleLabel` namespace. It defines options for the scale title. Note that this only applies to cartesian axes.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/axes/radial/linear.mdx

@@ -12,6 +12,7 @@ The following additional configuration options are provided by the radial linear
 ## Configuration Options
 
 ### Linear Radial Axis specific options
+The radial linear scale specific configuration can be adjusted in the `options.scales[scaleId]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -25,6 +26,7 @@ The following additional configuration options are provided by the radial linear
 ## Tick Configuration
 
 ### Linear Radial Axis specific options
+The radial linear scale tick specific configuration can be adjusted in the `options.scales[scaleId].ticks` namespace.
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
@@ -99,7 +101,8 @@ let options = {
 
 ## Angle Line Options
 
-The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the `angleLines` sub options.
+The following options are used to configure angled lines that radiate from the center of the chart to the point labels.
+The angle line specific configuration can be adjusted in the `options.scales[scaleId].angleLines` namespace.
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
@@ -115,7 +118,8 @@ The scriptable context is described in [Options](../../general/options.md#scale)
 
 ## Point Label Options
 
-The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the `pointLabels` sub options.
+The following options are used to configure the point labels that are shown on the perimeter of the scale.
+The point label specific configuration can be adjusted in the `options.scales[scaleId].pointLabels` namespace.
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------

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
 
-The grid line configuration is nested under the scale configuration in the `gridLines` key. It defines options for the grid lines that run perpendicular to the axis.
+The scale label configuration can be adjusted in the `options.scales[scaleId].gridLines` namespace. It defines options for the grid lines that run perpendicular to the axis.
 
 | Name | Type | Scriptable | Indexable | Default | Description
 | ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
@@ -41,7 +41,7 @@ The scriptable context is described in [Options](../general/options.md#tick) sec
 
 ## Major Tick Configuration
 
-The majorTick configuration is nested under the ticks configuration in the `major` key. It defines options for the major tick marks that are generated by the axis.
+The scale label configuration can be adjusted in the `options.scales[scaleId].ticks.major` namespace. It defines options for the major tick marks that are generated by the axis.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/charts/scatter.mdx

@@ -2,7 +2,7 @@
 title: Scatter Chart
 ---
 
-Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
+Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
 
 import { useEffect, useRef } from 'react';
 

docs/docs/configuration/animations.mdx

@@ -109,7 +109,7 @@ function example() {
 
 ## Animation Configuration
 
-The following animation options are available. The global options are defined in `Chart.defaults.animation`.
+The animation configuration can be adjusted in the `options.animation` namespace. The global options are defined in `Chart.defaults.animation`.
 The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.js#L6-L55" target="_blank">core.animations.js</a>
 
 | Name | Type | Default | Description
@@ -133,18 +133,20 @@ A custom mode can be used by passing a custom `mode` to [update](../developers/a
 A mode option is defined by the same options of the main [animation configuration](#animation-configuration).
 
 ### Default modes
+The animation mode configuration can be adjusted in the `options.animation` namespace.
 
 | Mode | Option | Value | Description
 | -----| ------ | ----- | -----
-| `'active'` | duration | 400 | Override default duration to 400ms for hover animations
-| `'resize'` | duration | 0 | Override default duration to 0ms (= no animation) for resize
-| `'show'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
-| `'show'` | visible | `{ type: 'boolean', duration: 0 }` | Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
-| `'hide'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
-| `'hide'` | visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false at a very late phase of animation
+| `active` | duration | 400 | Override default duration to 400ms for hover animations
+| `resize` | duration | 0 | Override default duration to 0ms (= no animation) for resize
+| `show` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
+| `show` | visible | `{ type: 'boolean', duration: 0 }` | Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
+| `hide` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
+| `hide` | visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false at a very late phase of animation
 
 ## Animation property configuration
 
+The animation property configuration can be adjusted in the `options.animation[animation]` namespace.
 Property option configures which element property to use to animate the chart and its starting and ending values.
 A property option is defined by the same options of the main [animation configuration](#animation-configuration), adding the following ones:
 
@@ -159,7 +161,9 @@ A property option is defined by the same options of the main [animation configur
 
 Properties collection option configures which set of element properties to use to animate the chart.
 Collection can be named whatever you like, but should not collide with a `[property]` or `[mode]`.
-A properties collection option is defined by the same options of the [animation property configuration](#animation-property-configuration), adding the following one:
+A properties collection option is defined by the same options as the [animation property configuration](#animation-property-configuration), adding the following one:
+
+The animation properties collection configuration can be adjusted in the `options.animation[collection]` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -236,6 +240,8 @@ See [Robert Penner's easing equations](http://robertpenner.com/easing/).
 The animation configuration provides callbacks which are useful for synchronizing an external draw to the chart animation.
 The callbacks can be set only at main [animation configuration](#animation-configuration).
 
+The callbacks configuration can be adjusted in the `options.animation` namespace.
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `onProgress` | `function` | `null` | Callback called on each step of an animation.

docs/docs/configuration/decimation.md

@@ -6,7 +6,7 @@ The decimation plugin can be used with line charts to automatically decimate dat
 
 ## Configuration Options
 
-The decimation plugin configuration is passed into the `options.plugins.decimation` namespace. The global options for the plugin are defined in `Chart.defaults.plugins.decimation`.
+The decimation plugin configuration can be adjusted in the `options.plugins.decimation` namespace. The global options for the plugin are defined in `Chart.defaults.plugins.decimation`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/general/device-pixel-ratio.md → docs/docs/configuration/device-pixel-ratio.md

@@ -9,6 +9,7 @@ For applications where a chart will be converted to a bitmap, or printed to a hi
 Setting `devicePixelRatio` to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.
 
 ## Configuration Options
+The device pixel ratio configuration can be adjusted in the `options` namespace (root of options object)
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/elements.md

@@ -16,7 +16,7 @@ Chart.defaults.elements.bar.borderWidth = 2;
 
 Point elements are used to represent the points in a line, radar or bubble chart.
 
-Global point options: `Chart.defaults.elements.point`.
+The point element configuration is passed into the `options.elements.point` namespace. Global point options: `Chart.defaults.elements.point`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -25,7 +25,7 @@ Global point options: `Chart.defaults.elements.point`.
 | `rotation` | `number` | `0` | Point rotation (in degrees).
 | `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Point fill color.
 | `borderWidth` | `number` | `1` | Point stroke width.
-| `borderColor` | [`Color`](../general/colors.md) | `Chart.defaults.borderColor` | Point stroke color.
+| `borderColor` | [`Color`](../general/colors.md) | `'Chart.defaults.borderColor` | Point stroke color.
 | `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
 | `hoverRadius` | `number` | `4` | Point radius when hovered.
 | `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
@@ -51,7 +51,7 @@ If the value is an image, that image is drawn on the canvas using [drawImage](ht
 
 Line elements are used to represent the line in a line chart.
 
-Global line options: `Chart.defaults.elements.line`.
+The line element configuration can be adjusted in the `options.elements.line` namespace. Global line options: `Chart.defaults.elements.line`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -72,7 +72,7 @@ Global line options: `Chart.defaults.elements.line`.
 
 Bar elements are used to represent the bars in a bar chart.
 
-Global bar options: `Chart.defaults.elements.bar`.
+The bar element configuration can be adjusted in the `options.elements.bar` namespace. Global bar options: `Chart.defaults.elements.bar`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -87,7 +87,7 @@ Global bar options: `Chart.defaults.elements.bar`.
 
 Arcs are used in the polar area, doughnut and pie charts.
 
-Global arc options: `Chart.defaults.elements.arc`.
+The arc element configuration can be adjusted in the `options.elements.arc` namespace. Global arc options: `Chart.defaults.elements.arc`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/general/interactions/events.md → docs/docs/configuration/interactions/events.md

@@ -3,6 +3,7 @@ title: Events
 ---
 
 The following properties define how the chart interacts with events.
+The events configuration can be adjusted in the `options` namespace (root of options object)
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/general/interactions/index.md → docs/docs/configuration/interactions/index.md

@@ -2,10 +2,10 @@
 title: Interactions
 ---
 
-The interaction configuration is passed into the `options.interaction` namespace. The global interaction configuration is at `Chart.defaults.interaction`. To configure which events trigger chart interactions, see [events](./events.md#events).
+The interaction configuration can be adjusted in the `options.interaction` namespace. The global interaction configuration is at `Chart.defaults.interaction`. To configure which events trigger chart interactions, see [events](events.md#events).
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `mode` | `string` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
+| `mode` | `string` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](modes.md#interaction-modes) for details.
 | `intersect` | `boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
 | `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.

docs/docs/configuration/layout.md

@@ -2,7 +2,7 @@
 title: Layout
 ---
 
-The layout configuration is passed into the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.layout`.
+The layout configuration can be adjusted in the `options.layout` namespace. The global options for the chart layout is defined in `Chart.defaults.layout`.
 
 | Name | Type | Default | [Scriptable](../general/options.md#scriptable-options) | Description
 | ---- | ---- | ------- | :----: | -----------

docs/docs/configuration/legend.md

@@ -6,7 +6,7 @@ The chart legend displays data about the datasets that are appearing on the char
 
 ## Configuration options
 
-The legend configuration is passed into the `options.plugins.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`.
+The legend configuration can be adjusted in the `options.plugins.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -46,7 +46,7 @@ Defaults to `'center'` for unrecognized values.
 
 ## Legend Label Configuration
 
-The legend label configuration is nested below the legend configuration using the `labels` key.
+The legend label configuration is nested below the legend configuration using the `options.plugins.legend.labels` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -63,7 +63,7 @@ The legend label configuration is nested below the legend configuration using th
 
 ## Legend Title Configuration
 
-The legend title configuration is nested below the legend configuration using the `title` key.
+The legend title configuration is nested below the legend configuration using the `options.plugins.legend.title` namespace.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/general/locale.md → docs/docs/configuration/locale.md

@@ -14,11 +14,12 @@ A Unicode BCP 47 locale identifier consists of
   4. (optionally) one or more variant codes, and
   5. (optionally) one or more extension sequences,
 
-with all present components separated by hyphens. 
+with all present components separated by hyphens.
 
 By default the chart is using the default locale of the platform which is running on.
 
 ## Configuration Options
+The locale configuration can be adjusted in the `options` namespace (root of options object)
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/general/responsive.md → docs/docs/configuration/responsive.md

@@ -12,6 +12,7 @@ The following examples **do not work**:
 Chart.js provides a [few options](#configuration-options) to enable responsiveness and control the resize behavior of charts by detecting when the canvas *display* size changes and update the *render* size accordingly.
 
 ## Configuration Options
+The performance configuration can be adjusted in the `options` namespace (root of options object)
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/title.md

@@ -6,7 +6,7 @@ The chart title defines text to draw at the top of the chart.
 
 ## Title Configuration
 
-The title configuration is passed into the `options.plugins.title` namespace. The global options for the chart title is defined in `Chart.defaults.plugins.title`.
+The title configuration can be adjusted in the `options.plugins.title` namespace. The global options for the chart title is defined in `Chart.defaults.plugins.title`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------