Docs/Add sample for centered point labels (#10013)

* Add sample for centered point labels

* update chart title

* link to sample for more clarity from property

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 75162ea83d79de43092d30789dc2e2e7af15de2a..10f9cddb80d6b3289c5cc601a920268f2d32c06e 100644 (file)
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -164,6 +164,7 @@ module.exports = {
             'other-charts/pie',
             'other-charts/multi-series-pie',
             'other-charts/polar-area',
+            'other-charts/polar-area-center-labels',
             'other-charts/radar',
             'other-charts/radar-skip-points',
             'other-charts/combo-bar-line',

diff --git a/docs/axes/radial/linear.md b/docs/axes/radial/linear.md
index 839a635b58314afec41230cad0b7355276cc0bc1..18a6f7b63e494f37cc2dea7590d65922e75e48d9 100644 (file)
--- a/docs/axes/radial/linear.md
+++ b/docs/axes/radial/linear.md
@@ -14,7 +14,7 @@ Namespace: `options.scales[scaleId]`
 | ---- | ---- | ------- | -----------
 | `animate` | `boolean` | `true` | Whether to animate scaling the chart from the centre
 | `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
-| `beginAtZero` | `boolean` | `false` | if true, scale will include 0 if it is not already included.
+| `beginAtZero` | `boolean` | `false` | If true, scale will include 0 if it is not already included.
 | `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
 | `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top.
 
@@ -31,7 +31,7 @@ Namespace: `options.scales[scaleId].ticks`
 | `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation.
 | `format` | `object` | Yes | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
 | `maxTicksLimit` | `number` | Yes | `11` | Maximum number of ticks and gridlines to show.
-| `precision` | `number` | Yes | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
+| `precision` | `number` | Yes | | If defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
 | `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more...](#step-size)
 
 !!!include(axes/_common_ticks.md)!!!
@@ -101,7 +101,7 @@ Namespace: `options.scales[scaleId].angleLines`
 
 | Name | Type | Scriptable | Default | Description
 | ---- | ---- | ------- | ------- | -----------
-| `display` | `boolean` | | `true` | if true, angle lines are shown.
+| `display` | `boolean` | | `true` | If true, angle lines are shown.
 | `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.borderColor` | Color of angled lines.
 | `lineWidth` | `number` | Yes | `1` | Width of angled lines.
 | `borderDash` | `number[]` | Yes<sup>1</sup> | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
@@ -120,12 +120,12 @@ Namespace: `options.scales[scaleId].pointLabels`
 | ---- | ---- | ------- | ------- | -----------
 | `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
 | `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
-| `display` | `boolean` | | `true` | if true, point labels are shown.
+| `display` | `boolean` | | `true` | If true, point labels are shown.
 | `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
 | `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.
 | `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../../general/fonts.md)
 | `padding` | `number` | Yes | 5 | Padding between chart and point labels.
-| `centerPointLabels` | `boolean` | | `false` | if true, point labels are centered.
+| [`centerPointLabels`](../../samples/other-charts/polar-area-center-labels.md) | `boolean` | | `false` | If true, point labels are centered.
 
 The scriptable context is described in [Options](../../general/options.md#scale) section.
 

diff --git a/docs/samples/other-charts/polar-area-center-labels.md b/docs/samples/other-charts/polar-area-center-labels.md
new file mode 100644 (file)
index 0000000..cad6cab
--- /dev/null
+++ b/docs/samples/other-charts/polar-area-center-labels.md
@@ -0,0 +1,102 @@
+# Polar area centered point labels
+
+```js chart-editor
+// <block:actions:2>
+const actions = [
+  {
+    name: 'Randomize',
+    handler(chart) {
+      chart.data.datasets.forEach(dataset => {
+        dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Add Data',
+    handler(chart) {
+      const data = chart.data;
+      if (data.datasets.length > 0) {
+        data.labels.push('data #' + (data.labels.length + 1));
+
+        for (let index = 0; index < data.datasets.length; ++index) {
+          data.datasets[index].data.push(Utils.rand(0, 100));
+        }
+
+        chart.update();
+      }
+    }
+  },
+  {
+    name: 'Remove Data',
+    handler(chart) {
+      chart.data.labels.splice(-1, 1); // remove the label first
+
+      chart.data.datasets.forEach(dataset => {
+        dataset.data.pop();
+      });
+
+      chart.update();
+    }
+  }
+];
+// </block:actions>
+
+// <block:setup:1>
+const DATA_COUNT = 5;
+const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
+
+const labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
+const data = {
+  labels: labels,
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: Utils.numbers(NUMBER_CFG),
+      backgroundColor: [
+        Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
+        Utils.transparentize(Utils.CHART_COLORS.orange, 0.5),
+        Utils.transparentize(Utils.CHART_COLORS.yellow, 0.5),
+        Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
+        Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
+      ]
+    }
+  ]
+};
+// </block:setup>
+
+// <block:config:0>
+const config = {
+  type: 'polarArea',
+  data: data,
+  options: {
+    responsive: true,
+    scales: {
+      r: {
+        pointLabels: {
+          display: true,
+          centerPointLabels: true,
+          font: {
+            size: 18
+          }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: 'Chart.js Polar Area Chart With Centered Point Labels'
+      }
+    }
+  },
+};
+// </block:config>
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```