# 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 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'false
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. |
borderDash | number[] | [] | Arc line dash. See MDN (opens new window). |
borderDashOffset | number | 0.0 | Arc line dash offset. See MDN (opens new window). |
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 |