Clarify options placement (#8427)

* improve clarity of docs by showing party qualified names in table and place of the namespace above

* add missing line

* remove partial qualified names, made some tables unusable and made it overall bit unclear. Added the namespace above each table

* fix sidebars tabs to spaces

* implement kurkles feedback

docs/docs/axes/_common.md

@@ -1,5 +1,7 @@
 ### Common options to all axes
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `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.

docs/docs/axes/_common_ticks.md

@@ -1,5 +1,7 @@
 ### Common tick options to all axes
 
+Namespace: `options.scales[scaleId].ticks`
+
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | :-------------------------------: | ------- | -----------
 | `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).

docs/docs/axes/cartesian/_common.md

@@ -1,5 +1,7 @@
 ### Common options to all cartesian axes
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.mdx#scale-bounds)

docs/docs/axes/cartesian/_common_ticks.md

@@ -1,5 +1,7 @@
 ### Common tick options to all cartesian axes
 
+Namespace: `options.scales[scaleId].ticks`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `align` | `string` | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.

docs/docs/axes/cartesian/category.mdx

@@ -46,6 +46,8 @@ let chart = new Chart(ctx, {
 
 ### Category Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Description
 | ---- | ---- | -----------
 | `min` | `string`\|`number` | The minimum item to display. [more...](#min-max-configuration)

docs/docs/axes/cartesian/linear.mdx

@@ -13,6 +13,8 @@ The linear scale is used to chart numerical data. It can be placed on either the
 
 ### Linear Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Description
 | ---- | ---- | -----------
 | `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
@@ -24,6 +26,8 @@ The linear scale is used to chart numerical data. It can be placed on either the
 
 ### Linear Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter

docs/docs/axes/cartesian/logarithmic.mdx

@@ -18,6 +18,8 @@ The logarithmic scale is used to chart numerical data. It can be placed on eithe
 
 ### Logarithmic Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter

docs/docs/axes/cartesian/time.mdx

@@ -26,6 +26,8 @@ When providing data for the time scale, Chart.js uses timestamps defined as mill
 
 ### Time Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `adapters.date` | `object` | `{}` | Options for adapter for external date library if that adapter needs or supports options

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.
 
+Namespace: `options.scales[scaleId]`
+
 | 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.
+Namespace: `options.scales[scaleId].scaleLabel`, 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

@@ -13,6 +13,8 @@ The following additional configuration options are provided by the radial linear
 
 ### Linear Radial Axis specific options
 
+Namespace: `options.scales[scaleId]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `animate` | `boolean` | `true` | Whether to animate scaling the chart from the centre
@@ -26,6 +28,8 @@ The following additional configuration options are provided by the radial linear
 
 ### Linear Radial Axis specific options
 
+Namespace: `options.scales[scaleId].ticks`
+
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
@@ -99,7 +103,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.
+Namespace: `options.scales[scaleId].angleLines`
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
@@ -115,7 +120,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.
+Namespace: `options.scales[scaleId].pointLabels`
 
 | 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.
+Namespace: `options.scales[scaleId].gridLines`, 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.
+Namespace: `options.scales[scaleId].ticks.major`, 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,8 +109,8 @@ function example() {
 
 ## Animation Configuration
 
-The following animation options are available. 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>
+Namespace:  `options.animation`, the global options are defined in `Chart.defaults.animation`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -134,20 +134,24 @@ A mode option is defined by the same options of the main [animation configuratio
 
 ### Default modes
 
+Namespace: `options.animation`
+
 | 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
 
 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:
 
+Namespace: `options.animation[animation]`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, `'color'` and `'boolean'`. Only really needed for `'color'`, because `typeof` does not get that right.
@@ -159,7 +163,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 +242,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).
 
+Namespace: `options.animation`
+
 | 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`.
+Namespace: `options.plugins.decimation`, the global options for the plugin are defined in `Chart.defaults.plugins.decimation`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

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

@@ -10,6 +10,8 @@ Setting `devicePixelRatio` to a value other than 1 will force the canvas size to
 
 ## Configuration Options
 
+Namespace: `options`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `devicePixelRatio` | `number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio.

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`.
+Namespace: `options.elements.point`, 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`.
+Namespace: `options.elements.line`, 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`.
+Namespace: `options.elements.bar`, 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`.
+Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.arc`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/interactions/events.md

@@ -3,6 +3,7 @@ title: Events
 ---
 
 The following properties define how the chart interacts with events.
+Namespace: `options`
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/interactions/index.md

@@ -2,11 +2,11 @@
 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).
+Namespace: `options.interaction`, 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`.
+Namespace: `options.layout`, 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`.
+Namespace: `options.plugins.legend`, 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.
+Namespace: `options.plugins.legend.labels`
 
 | 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.
+Namespace: `options.plugins.legend.title`
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/locale.md

@@ -20,6 +20,8 @@ By default the chart is using the default locale of the platform which is runnin
 
 ## Configuration Options
 
+Namespace: `options`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `locale` | `string` | `undefined` | a string with a BCP 47 language tag, leveraging on [INTL NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat).

docs/docs/configuration/responsive.md

@@ -13,6 +13,8 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene
 
 ## Configuration Options
 
+Namespace: `options`
+
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `responsive` | `boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).

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`.
+Namespace: `options.plugins.title`, the global options for the chart title is defined in `Chart.defaults.plugins.title`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/docs/configuration/tooltip.md

@@ -4,13 +4,13 @@ title: Tooltip
 
 ## Tooltip Configuration
 
-The tooltip configuration is passed into the `options.plugins.tooltip` namespace. The global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
+Namespace: `options.plugins.tooltip`, the global options for the chart tooltips is defined in `Chart.defaults.plugins.tooltip`.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled?
 | `custom` | `function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
-| `mode` | `string` | | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
+| `mode` | `string` | | Sets which elements appear in the tooltip. [more...](interactions/modes.md#interaction-modes).
 | `intersect` | `boolean` | | If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
 | `position` | `string` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes)
 | `callbacks` | `object` | | See the [callbacks section](#tooltip-callbacks).
@@ -101,7 +101,7 @@ Allows filtering of [tooltip items](#tooltip-item-context). Must implement at mi
 
 ## Tooltip Callbacks
 
-The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Tooltip` constructor.
+Namespace: `options.plugins.tooltip.callbacks`, the tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Tooltip` constructor.
 
 All functions are called with the same arguments: a [tooltip item context](#tooltip-item-context). All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
 

docs/docs/developers/api.md

@@ -64,7 +64,7 @@ myLineChart.stop();
 
 Use this to manually resize the canvas element. This is run each time the canvas container is resized, but you can call this method manually if you change the size of the canvas nodes container element.
 
-You can call `.resize()` with no parameters to have the chart take the size of its container element, or you can pass explicit dimensions (e.g., for [printing](../general/responsive.md#printing-resizable-charts)).
+You can call `.resize()` with no parameters to have the chart take the size of its container element, or you can pass explicit dimensions (e.g., for [printing](../configuration/responsive.md#printing-resizable-charts)).
 
 ```javascript
 // Resizes & redraws to fill its container element

docs/sidebars.js

@@ -14,10 +14,6 @@ module.exports = {
     General: [
       'general/data-structures',
       'general/accessibility',
-      'general/responsive',
-      'general/device-pixel-ratio',
-      'general/locale',
-      {Interactions: ['general/interactions/index', 'general/interactions/events', 'general/interactions/modes']},
       'general/options',
       'general/colors',
       'general/fonts',
@@ -25,6 +21,10 @@ module.exports = {
     ],
     Configuration: [
       'configuration/index',
+      'configuration/responsive',
+      'configuration/device-pixel-ratio',
+      'configuration/locale',
+      {Interactions: ['configuration/interactions/index', 'configuration/interactions/events', 'configuration/interactions/modes']},
       'configuration/animations',
       'configuration/layout',
       'configuration/legend',
@@ -46,18 +46,22 @@ module.exports = {
     ],
     Axes: [
       'axes/index',
-      {Cartesian: [
-        'axes/cartesian/index',
-        'axes/cartesian/category',
-        'axes/cartesian/linear',
-        'axes/cartesian/logarithmic',
-        'axes/cartesian/time',
-        'axes/cartesian/timeseries'
-      ]},
-      {Radial: [
-        'axes/radial/index',
-        'axes/radial/linear'
-      ]},
+      {
+        Cartesian: [
+          'axes/cartesian/index',
+          'axes/cartesian/category',
+          'axes/cartesian/linear',
+          'axes/cartesian/logarithmic',
+          'axes/cartesian/time',
+          'axes/cartesian/timeseries'
+        ],
+      },
+      {
+        Radial: [
+          'axes/radial/index',
+          'axes/radial/linear'
+        ],
+      },
       'axes/labelling',
       'axes/styling'
     ],
@@ -85,5 +89,5 @@ module.exports = {
       },
       'notes/license'
     ]
-  },
+  }
 };