Document the different parts of cartesian and radial scales with examples (#8636)

docs/docs/axes/cartesian/index.mdx

@@ -1,7 +1,6 @@
 ---
 title: Cartesian Axes
 ---
-
 import CommonAll from '../_common.md'
 import CommonCartesian from './_common.md'
 import CommonTicks from './_common_ticks.md'
@@ -17,6 +16,106 @@ Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes
 * [time](./time)
 * [timeseries](./timeseries)
 
+## Visual Components
+
+A cartesian axis is composed of visual components that can be individually configured. These components are:
+
+* [border](#border)
+* [grid lines](#grid-lines)
+* [tick](#ticks-and-tick-marks)
+* [tick mark](#ticks-and-tick-marks)
+* [title](#title)
+
+export const CartesianChartExample = ({id, xScaleConfig}) => {
+  useEffect(() => {
+    const cfg = {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label: 'Dataset 1',
+          backgroundColor: 'rgba(54, 162, 235, 0.5)',
+          borderColor: 'rgb(54, 162, 235)',
+          borderWidth: 1,
+          data: [
+            10, 20, 30, 40, 50, 0, 5
+          ]
+        }]
+      },
+      options: {
+        scales: {
+          x: xScaleConfig,
+        }
+      }
+    };
+    const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
+    return () => chart.destroy();
+  });
+  return <div className="chartjs-wrapper"><canvas id={id} className="chartjs"></canvas></div>;
+}
+
+### Border
+
+The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.
+
+<CartesianChartExample
+  id="chart-border"
+  xScaleConfig={{
+    grid: {
+      borderColor: 'red',
+    }
+  }}
+/>
+
+### Grid lines
+
+The grid lines for an axis are drawn on the chart area. In the image below, they are red.
+
+<CartesianChartExample
+  id="chart-grid"
+  xScaleConfig={{
+    grid: {
+      color: 'red',
+      borderColor: 'grey',
+      tickColor: 'grey'
+    }
+  }}
+/>
+
+### Ticks and Tick Marks
+
+Ticks represent data values on the axis that appear as labels. The tick mark is the extension of the grid line from the axis border to the label.
+In this example, the tick mark is drawn in red while the tick label is drawn in blue.
+
+<CartesianChartExample
+  id="chart-ticks"
+  xScaleConfig={{
+    grid: {
+      //color: 'red',
+      //borderColor: 'grey',
+      tickColor: 'red'
+    },
+    ticks: {
+      color: 'blue',
+    }
+  }}
+/>
+
+### Title
+
+The title component of the axis is used to label the data. In the example below, it is shown in red.
+
+<CartesianChartExample
+  id="chart-title"
+  xScaleConfig={{
+    title: {
+      color: 'red',
+      display: true,
+      text: 'Month'
+    }
+  }}
+/>
+
 ## Common Configuration
 
 <CommonCartesian />

docs/docs/axes/radial/index.md

@@ -1,7 +0,0 @@
----
-title: Radial Axes
----
-
-Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
-
-* [radialLinear](./linear.mdx)

docs/docs/axes/radial/index.mdx

@@ -0,0 +1,103 @@
+---
+title: Radial Axes
+---
+import { useEffect } from 'react';
+
+Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
+
+* [radialLinear](./linear.mdx)
+
+## Visual Components
+
+A radial axis is composed of visual components that can be individually configured. These components are:
+
+* [angle lines](#angle-lines)
+* [grid lines](#grid-lines)
+* [point labels](#point-labels)
+* [ticks](#ticks)
+
+export const RadialChartExample = ({id, rScaleConfig}) => {
+  useEffect(() => {
+    const cfg = {
+      type: 'radar',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label: 'Dataset 1',
+          backgroundColor: 'rgba(54, 162, 235, 0.5)',
+          borderColor: 'rgb(54, 162, 235)',
+          borderWidth: 1,
+          data: [
+            10, 20, 30, 40, 50, 0, 5
+          ]
+        }]
+      },
+      options: {
+        scales: {
+          r: rScaleConfig,
+        }
+      }
+    };
+    const chart = new Chart(document.getElementById(id).getContext('2d'), cfg);
+    return () => chart.destroy();
+  });
+  return (
+    <div className="chartjs-center">
+      <div className="chartjs-wrapper chartjs-small-chart">
+        <canvas id={id} className="chartjs"></canvas>
+      </div>
+    </div>
+  );
+}
+
+### Angle Lines
+
+The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
+
+<RadialChartExample
+  id="chart-angle"
+  rScaleConfig={{
+    angleLines: {
+      color: 'red'
+    }
+  }}
+/>
+
+### Grid Lines
+
+The grid lines for an axis are drawn on the chart area. In the example below, they are red.
+
+<RadialChartExample
+  id="chart-grid"
+  rScaleConfig={{
+    grid: {
+      color: 'red'
+    }
+  }}
+/>
+
+### Point Labels
+
+The point labels indicate the value for each angle line. In the example below, they are red.
+
+<RadialChartExample
+  id="chart-point-labels"
+  rScaleConfig={{
+    pointLabels: {
+      color: 'red'
+    }
+  }}
+/>
+
+### Ticks
+
+The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
+
+<RadialChartExample
+  id="chart-ticks"
+  rScaleConfig={{
+    ticks: {
+      color: 'red'
+    }
+  }}
+/>

docs/src/css/custom.css

@@ -27,3 +27,13 @@
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
 }
+
+.chartjs-small-chart {
+  width: 400px;
+}
+
+.chartjs-center {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}