Elements | Chart.js
Description: Open source HTML5 Charts for your website

# # Elements

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, lines, points, and bars. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

## # Global Configuration

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:

    Chart.defaults.elements.bar.borderWidth = 2;

## # Point Configuration

Point elements are used to represent the points in a line, radar or bubble chart.

Namespace: `options.elements.point`, global point options: `Chart.defaults.elements.point`.

Name | Type | Default | Description
--- | --- | --- | ---
`radius` | `number` | `3` | Point radius.
`pointStyle` | `pointStyle` | `'circle'` | Point style.
`rotation` | `number` | `0` | Point rotation (in degrees).
`backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Point fill color.
`borderWidth` | `number` | `1` | Point stroke width.
`borderColor` | `Color` | `'Chart.defaults.borderColor` | Point stroke color.
`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.

### # Point Styles

#### # 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:

- `'circle'`
- `'cross'`
- `'crossRot'`
- `'dash'`
- `'line'`
- `'rect'`
- `'rectRounded'`
- `'rectRot'`
- `'star'`
- `'triangle'`

If the value is an image or a canvas element, that image or canvas element is drawn on the canvas using drawImage
(opens new window).

## # Line Configuration

Line elements are used to represent the line in a line chart.

Namespace: `options.elements.line`, global line options: `Chart.defaults.elements.line`.

Name | Type | Default | Description
--- | --- | --- | ---
`tension` | `number` | `0` | Bézier curve tension (`0` for no Bézier curves).
`backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Line fill color.
`borderWidth` | `number` | `3` | Line stroke width.
`borderColor` | `Color` | `Chart.defaults.borderColor` | Line stroke color.
`borderCapStyle` | `string` | `'butt'` | Line cap style. See MDN (opens new window).
`borderDash` | `number[]` | `[]` | Line dash. See MDN (opens new window).
`borderDashOffset` | `number` | `0.0` | Line dash offset. See MDN (opens new window).
`borderJoinStyle` | `'round'`|`'bevel'`|`'miter'` | `'miter'` | Line join style. See MDN (opens new window).
`capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
`cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. See more...
`fill` | `boolean`|`string` | `false` | How to fill the area under the line. See area charts.
`stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).

## # Bar Configuration

Bar elements are used to represent the bars in a bar chart.

Namespace: `options.elements.bar`, global bar options: `Chart.defaults.elements.bar`.

Name | Type | Default | Description
--- | --- | --- | ---
`backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Bar fill color.
`borderWidth` | `number` | `0` | Bar stroke width.
`borderColor` | `Color` | `Chart.defaults.borderColor` | Bar stroke color.
`borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'middle'`, `'bottom'`, `'left'`, `'top'`, `'right'` or `false`.
`borderRadius` | `number`|`object` | `0` | The bar border radius (in pixels).
`inflateAmount` | `number`|`'auto'` | `'auto'` | The amount of pixels to inflate the bar rectangle(s) when drawing.
`pointStyle` | `string`|`Image`|`HTMLCanvasElement` | `'circle'` | Style of the point for legend.

## # Arc Configuration

Arcs are used in the polar area, doughnut and pie charts.

Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.arc`.

Name | Type | Default | Description
--- | --- | --- | ---
`angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
`backgroundColor` | `Color` | `Chart.defaults.backgroundColor` | Arc fill color.
`borderAlign` | `'center'`|`'inner'` | `'center'` | Arc stroke alignment.
`borderColor` | `Color` | `'#fff'` | Arc stroke color.
`borderJoinStyle` | `'round'`|`'bevel'`|`'miter'` | `'bevel'`|`'round'` | Line join style. See MDN (opens new window). The default is `'round'` when `borderAlign` is `'inner'`
`borderWidth` | `number` | `2` | Arc stroke width.
`circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat