2021-03-30 16:32:39 +02:00
# Elements
2017-03-21 01:36:54 +01:00
2020-10-20 14:18:56 +02:00
While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way** . A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: ** [arc ](#arc-configuration )**, ** [lines ](#line-configuration )**, ** [points ](#point-configuration )**, and ** [bars ](#bar-configuration )**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
2017-03-21 01:36:54 +01:00
## Global Configuration
2020-01-03 20:07:38 +01:00
The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.elements` . For example, to set the border width of all bar charts globally you would do:
2017-03-21 01:36:54 +01:00
```javascript
2020-10-20 14:18:56 +02:00
Chart.defaults.elements.bar.borderWidth = 2;
2017-03-21 01:36:54 +01:00
```
## Point Configuration
2020-02-20 00:13:40 +01:00
2019-01-29 13:34:16 +01:00
Point elements are used to represent the points in a line, radar or bubble chart.
2017-03-21 01:36:54 +01:00
2021-02-19 17:44:05 +01:00
Namespace: `options.elements.point` , global point options: `Chart.defaults.elements.point` .
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
| `radius` | `number` | `3` | Point radius.
2021-07-30 14:14:07 +02:00
| [`pointStyle` ](#point-styles ) | [`pointStyle` ](#types ) | `'circle'` | Point style.
2019-01-29 13:34:16 +01:00
| `rotation` | `number` | `0` | Point rotation (in degrees).
2020-12-18 21:03:01 +01:00
| `backgroundColor` | [`Color` ](../general/colors.md ) | `Chart.defaults.backgroundColor` | Point fill color.
2019-01-29 13:34:16 +01:00
| `borderWidth` | `number` | `1` | Point stroke width.
2021-02-19 17:44:05 +01:00
| `borderColor` | [`Color` ](../general/colors.md ) | `'Chart.defaults.borderColor` | Point stroke color.
2019-01-29 13:34:16 +01:00
| `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
| `hoverRadius` | `number` | `4` | Point radius when hovered.
| `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
2017-03-21 01:36:54 +01:00
2017-08-24 09:34:38 +02:00
### Point Styles
2021-07-30 14:14:07 +02:00
#### Types
The `pointStyle` argument accepts the following type of inputs: `string` , `Image` and `HTMLCanvasElement`
#### Info
When a string is provided, the following values are supported:
2020-02-20 00:13:40 +01:00
2017-08-24 09:34:38 +02:00
- `'circle'`
- `'cross'`
- `'crossRot'`
- `'dash'`
- `'line'`
- `'rect'`
- `'rectRounded'`
- `'rectRot'`
- `'star'`
- `'triangle'`
2021-07-23 07:26:49 +02:00
If the value is an image or a canvas element, that image or canvas element is drawn on the canvas using [drawImage ](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage ).
2017-08-24 09:34:38 +02:00
2017-03-21 01:36:54 +01:00
## Line Configuration
2020-02-20 00:13:40 +01:00
2017-03-21 01:36:54 +01:00
Line elements are used to represent the line in a line chart.
2021-02-19 17:44:05 +01:00
Namespace: `options.elements.line` , global line options: `Chart.defaults.elements.line` .
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
2020-07-28 23:24:55 +02:00
| `tension` | `number` | `0` | Bézier curve tension (`0` for no Bézier curves).
2021-04-16 21:46:14 +02:00
| `backgroundColor` | [`Color` ](/general/colors.md ) | `Chart.defaults.backgroundColor` | Line fill color.
2019-01-29 13:34:16 +01:00
| `borderWidth` | `number` | `3` | Line stroke width.
2021-04-16 21:46:14 +02:00
| `borderColor` | [`Color` ](/general/colors.md ) | `Chart.defaults.borderColor` | Line stroke color.
2019-01-29 13:34:16 +01:00
| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN ](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap ).
| `borderDash` | `number[]` | `[]` | Line dash. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash ).
| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset ).
| `borderJoinStyle` | `string` | `'miter'` | Line join style. See [MDN ](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin ).
| `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
2021-09-05 22:31:00 +02:00
| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more... ](/charts/line.md#cubicinterpolationmode )
2021-04-16 21:46:14 +02:00
| `fill` | `boolean` \|`string` | `false` | How to fill the area under the line. See [area charts ](/charts/area.md#filling-modes ).
2019-01-29 13:34:16 +01:00
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
2017-03-21 01:36:54 +01:00
2020-10-20 14:18:56 +02:00
## Bar Configuration
2020-02-20 00:13:40 +01:00
2020-10-20 14:18:56 +02:00
Bar elements are used to represent the bars in a bar chart.
2017-03-21 01:36:54 +01:00
2021-02-19 17:44:05 +01:00
Namespace: `options.elements.bar` , global bar options: `Chart.defaults.elements.bar` .
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
2021-04-16 21:46:14 +02:00
| `backgroundColor` | [`Color` ](/general/colors.md ) | `Chart.defaults.backgroundColor` | Bar fill color.
2019-01-29 13:34:16 +01:00
| `borderWidth` | `number` | `0` | Bar stroke width.
2021-04-16 21:46:14 +02:00
| `borderColor` | [`Color` ](/general/colors.md ) | `Chart.defaults.borderColor` | Bar stroke color.
2021-07-21 13:13:45 +02:00
| `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'` , `'end'` , `'middle'` , `'bottom'` , `'left'` , `'top'` , `'right'` or `false` .
2021-02-09 21:43:52 +01:00
| `borderRadius` | `number` \|`object` | `0` | The bar border radius (in pixels).
2021-09-25 06:52:03 +02:00
| `inflateAmount` | `number` \|`'auto'` | `'auto'` | The amount of pixels to inflate the bar rectangle(s) when drawing.
2021-07-23 07:26:49 +02:00
| [`pointStyle` ](#point-styles ) | `string` \|`Image` \|`HTMLCanvasElement` | `'circle'` | Style of the point for legend.
2017-03-21 01:36:54 +01:00
## Arc Configuration
2020-02-20 00:13:40 +01:00
2017-03-21 01:36:54 +01:00
Arcs are used in the polar area, doughnut and pie charts.
2021-02-19 17:44:05 +01:00
Namespace: `options.elements.arc` , global arc options: `Chart.defaults.elements.arc` .
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
2019-09-07 13:20:07 +02:00
| `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
2021-04-16 21:46:14 +02:00
| `backgroundColor` | [`Color` ](/general/colors.md ) | `Chart.defaults.backgroundColor` | Arc fill color.
2019-01-29 13:34:16 +01:00
| `borderAlign` | `string` | `'center'` | Arc stroke alignment.
2021-04-16 21:46:14 +02:00
| `borderColor` | [`Color` ](/general/colors.md ) | `'#fff'` | Arc stroke color.
2019-01-29 13:34:16 +01:00
| `borderWidth` | `number` | `2` | Arc stroke width.