diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 75162ea83d7..10f9cddb80d 100644
--- 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 839a635b583..18a6f7b63e4 100644
--- 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[]` | Yes1 | `[]` | 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
index 00000000000..cad6cabb56e
--- /dev/null
+++ b/docs/samples/other-charts/polar-area-center-labels.md
@@ -0,0 +1,102 @@
+# Polar area centered point labels
+
+```js chart-editor
+//
+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();
+ }
+ }
+];
+//
+
+//
+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),
+ ]
+ }
+ ]
+};
+//
+
+//
+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'
+ }
+ }
+ },
+};
+//
+
+module.exports = {
+ actions: actions,
+ config: config,
+};
+```