# 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:

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