New `options.resolve` helper that determines the final value to use from an array of input values (fallback) and a given context and/or index. For now, only the bubble chart support scriptable options, see documentation for details. Add scriptable options documentation and update the bubble chart dataset properties table with their scriptable and indexable capabilities and default values. Also move point style description under the element configuration section.
4.4 KiB
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 rectangles. 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.global.elements
. For example, to set the border width of all bar charts globally you would do:
Chart.defaults.global.elements.rectangle.borderWidth = 2;
Point Configuration
Point elements are used to represent the points in a line chart or a bubble chart.
Global point options: Chart.defaults.global.elements.point
Name | Type | Default | Description |
---|---|---|---|
radius |
Number |
3 |
Point radius. |
pointStyle |
String |
circle |
Point style. |
backgroundColor |
Color |
'rgba(0,0,0,0.1)' |
Point fill color. |
borderWidth |
Number |
1 |
Point stroke width. |
borderColor |
Color |
'rgba(0,0,0,0.1)' |
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, that image is drawn on the canvas using drawImage.
Line Configuration
Line elements are used to represent the line in a line chart.
Global line options: Chart.defaults.global.elements.line
Name | Type | Default | Description |
---|---|---|---|
tension |
Number |
0.4 |
Bézier curve tension (0 for no Bézier curves). |
backgroundColor |
Color |
'rgba(0,0,0,0.1)' |
Line fill color. |
borderWidth |
Number |
3 |
Line stroke width. |
borderColor |
Color |
'rgba(0,0,0,0.1)' |
Line stroke color. |
borderCapStyle |
String |
'butt' |
Line cap style (see MDN). |
borderDash |
Array |
[] |
Line dash (see MDN). |
borderDashOffset |
Number |
0 |
Line dash offset (see MDN). |
borderJoinStyle |
String |
'miter |
Line join style (see MDN). |
capBezierPoints |
Boolean |
true |
true to keep Bézier control inside the chart, false for no restriction. |
fill |
Boolean/String |
true |
Fill location: 'zero' , 'top' , 'bottom' , true (eq. 'zero' ) or false (no fill). |
stepped |
Boolean |
false |
true to show the line as a stepped line (tension will be ignored). |
Rectangle Configuration
Rectangle elements are used to represent the bars in a bar chart.
Global rectangle options: Chart.defaults.global.elements.rectangle
Name | Type | Default | Description |
---|---|---|---|
backgroundColor |
Color |
'rgba(0,0,0,0.1)' |
Bar fill color. |
borderWidth |
Number |
0 |
Bar stroke width. |
borderColor |
Color |
'rgba(0,0,0,0.1)' |
Bar stroke color. |
borderSkipped |
String |
'bottom' |
Skipped (excluded) border: 'bottom' , 'left' , 'top' or 'right' . |
Arc Configuration
Arcs are used in the polar area, doughnut and pie charts.
Global arc options: Chart.defaults.global.elements.arc
.
Name | Type | Default | Description |
---|---|---|---|
backgroundColor |
Color |
'rgba(0,0,0,0.1)' |
Arc fill color. |
borderColor |
Color |
'#fff' |
Arc stroke color. |
borderWidth |
Number |
2 |
Arc stroke width. |