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:

'left'
'bottom'
'right'

The legend label configuration is nested below the legend configuration using the labels key.

Name	Type	Default	Description
`boxWidth`	`Number`	`40`	width of coloured box
`fontSize`	`Number`	`12`	font size of text
`fontStyle`	`String`	`'normal'`	font style of text
`fontColor`	Color	`'#666'`	Color of text
	`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 for details.
`filter`	`Function`	`null`	Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.
`usePointStyle`	`Boolean`	`false`	Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).

Legend Item Interface

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

Custom On Click Actions

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.

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 legendCallback config property.