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)
// ...