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, +}; +```