2021-03-30 16:32:39 +02:00
# Polar Area Chart
2017-03-21 01:36:54 +01:00
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
2021-03-30 16:32:39 +02:00
```js chart-editor
// < block:setup:1 >
const data = {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
};
// < / block:setup >
// < block:config:0 >
const config = {
type: 'polarArea',
data: data,
2021-04-04 00:08:20 +02:00
options: {}
2021-03-30 16:32:39 +02:00
};
// < / block:config >
module.exports = {
actions: [],
config: config,
};
```
2017-04-02 03:22:06 +02:00
2021-04-04 00:08:20 +02:00
## Dataset Properties
2017-03-21 01:36:54 +01:00
2021-04-04 00:08:20 +02:00
Namespaces:
2017-03-21 01:36:54 +01:00
2021-04-04 00:08:20 +02:00
* `data.datasets[index]` - options for this dataset only
* `options.datasets.polarArea` - options for all polarArea datasets
* `options.elements.arc` - options for all [arc elements ](../configuration/elements.md#arc-configuration )
* `options` - options for the whole chart
2017-03-21 01:36:54 +01:00
The following options can be included in a polar area chart dataset to configure options for that specific dataset.
2019-01-13 21:17:27 +01:00
| Name | Type | [Scriptable ](../general/options.md#scriptable-options ) | [Indexable ](../general/options.md#indexable-options ) | Default
| ---- | ---- | :----: | :----: | ----
2019-01-29 13:34:16 +01:00
| [`backgroundColor` ](#styling ) | [`Color` ](../general/colors.md ) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
2021-12-05 14:56:37 +01:00
| [`borderAlign` ](#border-alignment ) | `'center'` \|`'inner'` | Yes | Yes | `'center'`
2019-01-13 21:17:27 +01:00
| [`borderColor` ](#styling ) | [`Color` ](../general/colors.md ) | Yes | Yes | `'#fff'`
2021-12-05 14:56:37 +01:00
| [`borderJoinStyle` ](#styling ) | `'round'` \|`'bevel'` \|`'miter'` | Yes | Yes | `undefined`
2019-01-29 13:34:16 +01:00
| [`borderWidth` ](#styling ) | `number` | Yes | Yes | `2`
2020-12-18 21:03:01 +01:00
| [`clip` ](#general ) | `number` \|`object` | - | - | `undefined`
2019-01-29 13:34:16 +01:00
| [`data` ](#data-structure ) | `number[]` | - | - | **required**
2022-01-27 15:24:55 +01:00
| [`hoverBackgroundColor` ](#interactions ) | [`Color` ](../general/colors.md ) | Yes | Yes | `undefined`
2019-01-13 21:17:27 +01:00
| [`hoverBorderColor` ](#interactions ) | [`Color` ](../general/colors.md ) | Yes | Yes | `undefined`
2021-12-05 14:56:37 +01:00
| [`hoverBorderJoinStyle` ](#interactions ) | `'round'` \|`'bevel'` \|`'miter'` | Yes | Yes | `undefined`
2019-01-29 13:34:16 +01:00
| [`hoverBorderWidth` ](#interactions ) | `number` | Yes | Yes | `undefined`
2019-01-13 21:17:27 +01:00
2021-04-04 00:08:20 +02:00
All these values, if `undefined` , fallback to the scopes described in [option resolution ](../general/options )
2019-11-10 23:41:01 +01:00
### General
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
2019-01-13 21:17:27 +01:00
### Styling
The style of each arc can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
2021-12-05 14:56:37 +01:00
| `borderJoinStyle` | arc border join style. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin ).
2019-01-13 21:17:27 +01:00
| `borderWidth` | arc border width (in pixels).
All these values, if `undefined` , fallback to the associated [`elements.arc.*` ](../configuration/elements.md#arc-configuration ) options.
2018-12-18 13:58:02 +01:00
### Border Alignment
The following values are supported for `borderAlign` .
2019-10-23 01:14:54 +02:00
2018-12-18 13:58:02 +01:00
* `'center'` (default)
* `'inner'`
2020-10-13 00:06:07 +02:00
When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all the borders do not overlap.
2017-03-21 01:36:54 +01:00
2019-01-13 21:17:27 +01:00
### Interactions
The interaction with each arc can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | arc background color when hovered.
| `hoverBorderColor` | arc border color when hovered.
2021-12-05 14:56:37 +01:00
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin ).
2019-01-13 21:17:27 +01:00
| `hoverBorderWidth` | arc border width when hovered (in pixels).
All these values, if `undefined` , fallback to the associated [`elements.arc.*` ](../configuration/elements.md#arc-configuration ) options.
2017-03-21 01:36:54 +01:00
## Config Options
2021-02-26 20:57:34 +01:00
These are the customisation options specific to Polar Area charts. These options are looked up on access, and form together with the [global chart default options ](#default-options ) the options of the chart.
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
2019-01-29 13:34:16 +01:00
| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards.
2017-03-21 01:36:54 +01:00
2021-04-02 13:48:50 +02:00
The polar area chart uses the [radialLinear ](../axes/radial/linear.md ) scale. Additional configuration is provided via the scale.
2020-01-03 20:56:22 +01:00
2017-03-21 01:36:54 +01:00
## Default Options
2021-03-06 16:34:52 +01:00
We can also change these default values for each PolarArea type that is created, this object is available at `Chart.overrides.polarArea` . Changing the global options only affects charts created after the change. Existing charts are not changed.
2017-03-21 01:36:54 +01:00
For example, to configure all new polar area charts with `animateScale = false` you would do:
2020-01-11 00:30:29 +01:00
2017-03-21 01:36:54 +01:00
```javascript
2021-03-06 16:34:52 +01:00
Chart.overrides.polarArea.animation.animateScale = false;
2017-03-21 01:36:54 +01:00
```
## Data Structure
For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly for each slice.
```javascript
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
2017-07-09 14:58:18 +02:00
```