From c4cf7b2e08b50981f3ecfbf4dded2b391060c40a Mon Sep 17 00:00:00 2001
From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sun, 14 Mar 2021 01:22:28 -0500
Subject: [PATCH] Document the different parts of cartesian and radial scales
 with examples (#8636)

---
 docs/docs/axes/cartesian/index.mdx | 101 +++++++++++++++++++++++++++-
 docs/docs/axes/radial/index.md     |   7 --
 docs/docs/axes/radial/index.mdx    | 103 +++++++++++++++++++++++++++++
 docs/src/css/custom.css            |  10 +++
 4 files changed, 213 insertions(+), 8 deletions(-)
 delete mode 100644 docs/docs/axes/radial/index.md
 create mode 100644 docs/docs/axes/radial/index.mdx

diff --git a/docs/docs/axes/cartesian/index.mdx b/docs/docs/axes/cartesian/index.mdx
index 1a2f524d0..399d713c2 100644
--- a/docs/docs/axes/cartesian/index.mdx
+++ b/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 />
diff --git a/docs/docs/axes/radial/index.md b/docs/docs/axes/radial/index.md
deleted file mode 100644
index e44bef0aa..000000000
--- a/docs/docs/axes/radial/index.md
+++ /dev/null
@@ -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)
diff --git a/docs/docs/axes/radial/index.mdx b/docs/docs/axes/radial/index.mdx
new file mode 100644
index 000000000..cf38b8bd3
--- /dev/null
+++ b/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'
+    }
+  }}
+/>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index fd462c15c..53ae2207d 100644
--- a/docs/src/css/custom.css
+++ b/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;
+}
-- 
2.47.3