From: LeeLenaleee <39033624+LeeLenaleee@users.noreply.github.com>
Date: Fri, 19 Feb 2021 16:44:05 +0000 (+0100)
Subject: Clarify options placement (#8427)
X-Git-Tag: v3.0.0-beta.11~6
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=42190012809cb07bf6b4494fac3edd83e3f6a236;p=thirdparty%2FChart.js.git

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
---

diff --git a/docs/docs/axes/_common.md b/docs/docs/axes/_common.md
index 8662e4429..b0ca57018 100644
--- a/docs/docs/axes/_common.md
+++ b/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.
diff --git a/docs/docs/axes/_common_ticks.md b/docs/docs/axes/_common_ticks.md
index 6362036fe..c63b4ecc5 100644
--- a/docs/docs/axes/_common_ticks.md
+++ b/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).
diff --git a/docs/docs/axes/cartesian/_common.md b/docs/docs/axes/cartesian/_common.md
index c122398a3..7d47d9451 100644
--- a/docs/docs/axes/cartesian/_common.md
+++ b/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)
diff --git a/docs/docs/axes/cartesian/_common_ticks.md b/docs/docs/axes/cartesian/_common_ticks.md
index 387d511f4..31ab2b9f1 100644
--- a/docs/docs/axes/cartesian/_common_ticks.md
+++ b/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'`.
diff --git a/docs/docs/axes/cartesian/category.mdx b/docs/docs/axes/cartesian/category.mdx
index 3b0d0d4be..7dd089c8a 100644
--- a/docs/docs/axes/cartesian/category.mdx
+++ b/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)
diff --git a/docs/docs/axes/cartesian/linear.mdx b/docs/docs/axes/cartesian/linear.mdx
index 3a2f6f15c..5d0af157d 100644
--- a/docs/docs/axes/cartesian/linear.mdx
+++ b/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
diff --git a/docs/docs/axes/cartesian/logarithmic.mdx b/docs/docs/axes/cartesian/logarithmic.mdx
index 10fd7d9a2..ad0b7ec1a 100644
--- a/docs/docs/axes/cartesian/logarithmic.mdx
+++ b/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
diff --git a/docs/docs/axes/cartesian/time.mdx b/docs/docs/axes/cartesian/time.mdx
index c971e50a4..28c35295a 100644
--- a/docs/docs/axes/cartesian/time.mdx
+++ b/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
diff --git a/docs/docs/axes/index.mdx b/docs/docs/axes/index.mdx
index b5b8950e2..7a83229de 100644
--- a/docs/docs/axes/index.mdx
+++ b/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.
diff --git a/docs/docs/axes/labelling.md b/docs/docs/axes/labelling.md
index f2bde1e84..1c8efdeaa 100644
--- a/docs/docs/axes/labelling.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx
index fe3e99210..9456c2dc5 100644
--- a/docs/docs/axes/radial/linear.mdx
+++ b/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
 | ---- | ---- | ------- | ------- | -----------
diff --git a/docs/docs/axes/styling.mdx b/docs/docs/axes/styling.mdx
index 849368b5f..6e6f479ca 100644
--- a/docs/docs/axes/styling.mdx
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/charts/scatter.mdx b/docs/docs/charts/scatter.mdx
index c23ed91f9..d67f05696 100644
--- a/docs/docs/charts/scatter.mdx
+++ b/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';
 
diff --git a/docs/docs/configuration/animations.mdx b/docs/docs/configuration/animations.mdx
index d32fcae53..c1ed00497 100644
--- a/docs/docs/configuration/animations.mdx
+++ b/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.
diff --git a/docs/docs/configuration/decimation.md b/docs/docs/configuration/decimation.md
index 3aa26866d..3f741b75d 100644
--- a/docs/docs/configuration/decimation.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/general/device-pixel-ratio.md b/docs/docs/configuration/device-pixel-ratio.md
similarity index 97%
rename from docs/docs/general/device-pixel-ratio.md
rename to docs/docs/configuration/device-pixel-ratio.md
index 36dd22a11..dbd7dd930 100644
--- a/docs/docs/general/device-pixel-ratio.md
+++ b/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.
diff --git a/docs/docs/configuration/elements.md b/docs/docs/configuration/elements.md
index 781a4e592..5ced38efc 100644
--- a/docs/docs/configuration/elements.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/general/interactions/events.md b/docs/docs/configuration/interactions/events.md
similarity index 98%
rename from docs/docs/general/interactions/events.md
rename to docs/docs/configuration/interactions/events.md
index a5c7d55f2..e78abff41 100644
--- a/docs/docs/general/interactions/events.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/general/interactions/index.md b/docs/docs/configuration/interactions/index.md
similarity index 67%
rename from docs/docs/general/interactions/index.md
rename to docs/docs/configuration/interactions/index.md
index 807298cf2..7e37780b1 100644
--- a/docs/docs/general/interactions/index.md
+++ b/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.
 
diff --git a/docs/docs/general/interactions/modes.md b/docs/docs/configuration/interactions/modes.md
similarity index 100%
rename from docs/docs/general/interactions/modes.md
rename to docs/docs/configuration/interactions/modes.md
diff --git a/docs/docs/configuration/layout.md b/docs/docs/configuration/layout.md
index 5317d6e6c..1dd7ded61 100644
--- a/docs/docs/configuration/layout.md
+++ b/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
 | ---- | ---- | ------- | :----: | -----------
diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md
index a669ca64d..c123e2172 100644
--- a/docs/docs/configuration/legend.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/general/locale.md b/docs/docs/configuration/locale.md
similarity index 97%
rename from docs/docs/general/locale.md
rename to docs/docs/configuration/locale.md
index c8ea67d5c..8c550791f 100644
--- a/docs/docs/general/locale.md
+++ b/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).
diff --git a/docs/docs/general/responsive.md b/docs/docs/configuration/responsive.md
similarity index 99%
rename from docs/docs/general/responsive.md
rename to docs/docs/configuration/responsive.md
index 7c46b5be6..d8b87f5dd 100644
--- a/docs/docs/general/responsive.md
+++ b/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)).
diff --git a/docs/docs/configuration/title.md b/docs/docs/configuration/title.md
index b48c6eef3..e0e5572a1 100644
--- a/docs/docs/configuration/title.md
+++ b/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
 | ---- | ---- | ------- | -----------
diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
index 87942bda3..f2664b420 100644
--- a/docs/docs/configuration/tooltip.md
+++ b/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.
 
diff --git a/docs/docs/developers/api.md b/docs/docs/developers/api.md
index 438897969..60d1c6d08 100644
--- a/docs/docs/developers/api.md
+++ b/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
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 9d728900b..8dd60572c 100644
--- a/docs/sidebars.js
+++ b/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'
     ]
-  },
+  }
 };