# Options
The following table lists all available options:
Name | Type | Scriptable | Indexable | Default |
---|---|---|---|---|
align | number | string | Yes | Yes | 'center' |
anchor | string | Yes | Yes | 'center' |
backgroundColor | Style | null | Yes | Yes | null |
borderColor | Style | null | Yes | Yes | null |
borderRadius | number | Yes | Yes | 0 |
borderWidth | number | Yes | Yes | 0 |
clamp | boolean | Yes | Yes | false |
clip | boolean | Yes | Yes | false |
color | Style | Yes | Yes | color (opens new window) |
display | boolean | string | Yes | Yes | true |
font | object | Yes | Yes | - |
font.family | string | - | - | font.family (opens new window) |
font.size | string | - | - | font.size (opens new window) |
font.style | string | - | - | font.style (opens new window) |
font.weight | string | - | - | 'normal' |
font.lineHeight | number | string | - | - | 1.2 |
formatter | function | null | - | - | - |
labels | object | - | - | undefined |
listeners | object | - | - | {} |
offset | number | Yes | Yes | 4 |
opacity | number | Yes | Yes | 1 |
padding | number | object | Yes | Yes | - |
padding.top | number | - | - | 4 |
padding.right | number | - | - | 4 |
padding.bottom | number | - | - | 4 |
padding.left | number | - | - | 4 |
rotation | number | Yes | Yes | 0 |
textAlign | string | Yes | Yes | 'start' |
textStrokeColor | Style | Yes | Yes | color |
textStrokeWidth | number | Yes | Yes | 0 |
textShadowBlur | number | Yes | Yes | 0 |
textShadowColor | Color (opens new window) | Yes | Yes | color |
TIP
Refer to the Configuration section if you don't know how to configure these options.
# Scriptable Options
Scriptable options also accept a function which is called for each data and that takes the unique argument context
representing contextual information (see option context).
Example:
color: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
}
# Option Context
The option context is used to give contextual information when resolving options. It mainly applies to scriptable options but also to some function options such as formatter
.
The context object contains the following properties:
Property | Type | Description |
---|---|---|
active | bool | Whether the associated element is hovered (see interactions (opens new window)). |
chart | Chart | The associated chart. |
dataIndex | number | The index of the associated data. |
dataset | object | The dataset at index datasetIndex . |
datasetIndex | number | The index of the associated dataset. |
TIP
The option context can be extended dynamically with user custom properties, for example to implement event based label customizations & interactions.
# Indexable Options
Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a function is more appropriate.
Example:
color: [
'red', // color for data at index 0
'blue', // color for data at index 1
'green', // color for data at index 2
'black', // color for data at index 3
//...
]
# Style Options
Style options are usually inputs for fillStyle
(opens new window) or strokeStyle
(opens new window).
The following values are supported:
- string parsed as CSS color (opens new window) value
- CanvasGradient (opens new window) object (linear or radial gradient)
- CanvasPattern (opens new window) object (a repetitive image)
Examples:
color: 'green' // named color
color: '#dc143c' // HEX color
color: 'rgb(51, 170, 51)' // RGB color (opaque)
color: 'rgba(51, 170, 51, .5)' // RGBa color (semi-transparent)
// ...