The plugin options can be changed at 3 different levels and with the following priority:
dataset.datalabels.*
options.plugins.datalabels.*
Chart.defaults.global.plugins.datalabels.*
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 |
color |
Style |
Yes | Yes | 0 |
display |
Boolean |
Yes | Yes | true |
font |
Object |
Yes | Yes | - |
font.family |
String |
- | - | defaultFontFamily |
font.size |
String |
- | - | defaultFontSize |
font.style |
String |
- | - | defaultFontStyle |
font.weight |
String |
- | - | 'normal' |
font.lineHeight |
Number/String |
- | - | 1.2 |
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 |
formatter |
Function/null |
- | - | - |
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';
}
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:
active
(bool): whether the associated element is hovered (see interactions)chart
(Chart): the associated chartdataIndex
(int): index of the associated datadataset
(object): the dataset at index datasetIndex
datasetIndex
(int): index of the associated datasetIndexable 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 appropriated.
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 are usually inputs for fillStyle
or strokeStyle
.
The following values are supported:
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)
// ...