2021-03-30 16:32:39 +02:00
# Linear Radial Axis
2020-11-16 21:05:29 +01:00
2020-10-13 00:06:07 +02:00
The linear radial scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation to the center of the axis.
2017-03-21 01:36:54 +01:00
The following additional configuration options are provided by the radial linear scale.
## Configuration Options
2020-11-16 21:05:29 +01:00
### Linear Radial Axis specific options
2017-03-21 01:36:54 +01:00
2021-02-19 17:44:05 +01:00
Namespace: `options.scales[scaleId]`
2019-11-15 18:11:13 +01:00
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
2020-12-18 21:03:01 +01:00
| `animate` | `boolean` | `true` | Whether to animate scaling the chart from the centre
2019-11-15 18:11:13 +01:00
| `angleLines` | `object` | | Angle line configuration. [more... ](#angle-line-options )
2021-12-22 14:59:58 +01:00
| `beginAtZero` | `boolean` | `false` | If true, scale will include 0 if it is not already included.
2019-11-15 18:11:13 +01:00
| `pointLabels` | `object` | | Point label configuration. [more... ](#point-label-options )
2021-03-08 19:36:54 +01:00
| `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top.
2017-03-21 01:36:54 +01:00
2021-03-30 16:32:39 +02:00
!!!include(axes/_common.md)!!!
2020-11-16 21:05:29 +01:00
## Tick Configuration
2019-11-15 18:11:13 +01:00
2021-02-22 14:53:13 +01:00
### Linear Radial Axis specific tick options
2017-03-21 01:36:54 +01:00
2021-02-19 17:44:05 +01:00
Namespace: `options.scales[scaleId].ticks`
2020-06-11 14:49:54 +02:00
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
2021-03-15 13:49:25 +01:00
| `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation.
2021-03-14 16:21:30 +01:00
| `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.
2021-12-22 14:59:58 +01:00
| `precision` | `number` | Yes | | If defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
2021-03-14 16:21:30 +01:00
| `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more... ](#step-size )
2020-06-11 14:49:54 +02:00
2021-03-30 16:32:39 +02:00
!!!include(axes/_common_ticks.md)!!!
2020-11-16 21:05:29 +01:00
2020-12-18 21:03:01 +01:00
The scriptable context is described in [Options ](../../general/options.md#tick ) section.
2017-03-21 01:36:54 +01:00
## Axis Range Settings
Given the number of axis range settings, it is important to understand how they all interact with each other.
2017-11-30 14:41:32 +01:00
The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
2017-03-21 01:36:54 +01:00
```javascript
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
```
In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
```javascript
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
2021-02-06 22:19:21 +01:00
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
2017-03-21 01:36:54 +01:00
}
}
});
```
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Step Size
2019-12-07 01:47:00 +01:00
2019-01-29 13:34:16 +01:00
If set, the scale ticks will be enumerated by multiple of `stepSize` , having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
2017-03-21 01:36:54 +01:00
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5` .
```javascript
let options = {
2021-02-06 22:19:21 +01:00
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
2018-07-12 00:59:16 +02:00
}
2017-03-21 01:36:54 +01:00
}
};
```
## Angle Line Options
2021-02-19 17:44:05 +01:00
The following options are used to configure angled lines that radiate from the center of the chart to the point labels.
Namespace: `options.scales[scaleId].angleLines`
2017-03-21 01:36:54 +01:00
2020-06-11 14:49:54 +02:00
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
2021-12-22 14:59:58 +01:00
| `display` | `boolean` | | `true` | If true, angle lines are shown.
2020-12-18 21:03:01 +01:00
| `color` | [`Color` ](../../general/colors.md ) | Yes | `Chart.defaults.borderColor` | Color of angled lines.
2020-06-11 14:49:54 +02:00
| `lineWidth` | `number` | Yes | `1` | Width of angled lines.
2020-12-18 21:03:01 +01:00
| `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 ).
2020-06-11 14:49:54 +02:00
| `borderDashOffset` | `number` | Yes | `0.0` | Offset for line dashes. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset ).
2020-12-18 21:03:01 +01:00
1. the `borderDash` setting only accepts a static value or a function. Passing an array of arrays is not supported.
2020-06-11 14:49:54 +02:00
2020-12-18 21:03:01 +01:00
The scriptable context is described in [Options ](../../general/options.md#scale ) section.
2017-03-21 01:36:54 +01:00
## Point Label Options
2021-02-19 17:44:05 +01:00
The following options are used to configure the point labels that are shown on the perimeter of the scale.
Namespace: `options.scales[scaleId].pointLabels`
2017-03-21 01:36:54 +01:00
2020-06-11 14:49:54 +02:00
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
2021-03-13 23:37:43 +01:00
| `backdropColor` | [`Color` ](../../general/colors.md ) | `true` | `undefined` | Background color of the point label.
2021-03-14 16:21:30 +01:00
| `backdropPadding` | [`Padding` ](../../general/padding.md ) | | `2` | Padding of label backdrop.
2022-04-16 00:31:09 +02:00
| `borderRadius` | `number` \|`object` | `true` | `0` | Border radius of the point label
2021-12-22 14:59:58 +01:00
| `display` | `boolean` | | `true` | If true, point labels are shown.
2020-06-11 14:49:54 +02:00
| `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
2020-12-18 21:03:01 +01:00
| `color` | [`Color` ](../../general/colors.md ) | Yes | `Chart.defaults.color` | Color of label.
2021-05-05 04:18:25 +02:00
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts ](../../general/fonts.md )
2021-03-10 07:40:22 +01:00
| `padding` | `number` | Yes | 5 | Padding between chart and point labels.
2021-12-22 14:59:58 +01:00
| [`centerPointLabels` ](../../samples/other-charts/polar-area-center-labels.md ) | `boolean` | | `false` | If true, point labels are centered.
2020-06-11 14:49:54 +02:00
2020-12-18 21:03:01 +01:00
The scriptable context is described in [Options ](../../general/options.md#scale ) section.
2019-12-07 01:47:00 +01:00
## Internal data format
2020-10-13 00:06:07 +02:00
Internally, the linear radial scale uses numeric data