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

diff --git a/docs/docs/axes/cartesian/index.mdx b/docs/docs/axes/cartesian/index.mdx
index 1a2f524d046a09770058d8c8079be10be665fe19..399d713c2b768f047752d7fb0f1b174e3cbdc55d 100644 (file)
--- 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 (file)
index e44bef0..0000000
--- 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 (file)
index 0000000..cf38b8b
--- /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 fd462c15c2a052dc4195f06364d274c9339fa1d3..53ae2207dfa3d38143b76ea1b6142992403bdd22 100644 (file)
--- 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;
+}