Legend Configuration

The legend configuration is passed into the namespace. The global options for the chart legend is defined in Chart.defaults.global.legend.

Position

Position of the legend. Options are:

'top'
'bottom'
'right'

Alignment of the legend. Options are:

'start'
'center'

Defaults to 'center' for unrecognized values.

Legend Label Configuration

Name	Type	Default	Description
`boxWidth`	`number`	`40`	Width of coloured box.
`fontSize`	`number`	`12`	Font size of text.
	`string`	`‘normal’`	Font style of text.
`fontColor`	`Color`	`‘#666’`	Color of text.
`fontFamily`	`string`	`“‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”`	Font family of legend text.
`padding`	`number`	`10`	Padding between rows of colored boxes.
`generateLabels`	`function`		Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.
`filter`	`function`	`null`	Filters legend items out of the legend. Receives 2 parameters, a and the chart data.
`usePointStyle`	`boolean`	`false`	Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).

Items passed to the legend onClick function are the ones returned from labels.generateLabels. These items must implement the following interface.

Example

The following example will create a chart with the legend enabled and turn all of the text red in color.

It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.

The default legend click handler is:

Now when you click the legend in this chart, the visibility of the first two datasets will be linked together.

HTML Legends

Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a generateLegend() method on their prototype that returns an HTML string for the legend.

To configure how this legend is generated, you can change the config property.

Note that legendCallback is not called automatically and you must call generateLegend() yourself in code when creating a legend using this method.