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 | string |Image |HTMLCanvasElement | ‘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
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 | string | ‘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). |
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 | string | ‘center’ | Arc stroke alignment. |
borderColor | Color | ‘#fff’ | Arc stroke color. |
borderWidth | number | 2 | Arc stroke width. |