Interface: LegendOptions | Chart.js
Description: Open source HTML5 Charts for your website

# # Interface: LegendOptions<TType>

## # Type parameters

Name | Type
--- | ---
`TType` | extends `ChartType`

## # Properties

### # align

• align: `Align`

Alignment of the legend.

`default` 'center'

#### # Defined in

index.esm.d.ts:2274
(opens new window)

### # display

• display: `boolean`

Is the legend shown?

`default` true

#### # Defined in

index.esm.d.ts:2264
(opens new window)

### # fullSize

• fullSize: `boolean`

Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use.

`default` true

#### # Defined in

index.esm.d.ts:2287
(opens new window)

### # labels

• labels: `Object`

#### # Type declaration

Name | Type | Description
--- | --- | ---
`boxHeight` | `number` | Height of the coloured box. `default` fontSize
`boxPadding` | `number` | Padding between the color box and the text `default` 1
`boxWidth` | `number` | Width of colored box. `default` 40
`color` | `Color` | Color of label `see` Defaults.color
`font` | `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableChartContext`> | Font of label `see` Defaults.font
`padding` | `number` | Padding between rows of colored boxes. `default` 10
`pointStyle` | `PointStyle` | Override point style for the legend. Only applies if usePointStyle is true
`textAlign?` | `TextAlign` | Text alignment
`usePointStyle` | `boolean` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size). `default` false
`filter` | (`item`: `LegendItem`, `data`: `ChartData`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>) => `boolean` | -
`generateLabels` | (`chart`: `Chart`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>) => `LegendItem`[] | -
`sort` | (`a`: `LegendItem`, `b`: `LegendItem`, `data`: `ChartData`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>) => `number` | -

#### # Defined in

index.esm.d.ts:2306
(opens new window)

### # maxHeight

• maxHeight: `number`

Maximum height of the legend, in pixels

#### # Defined in

index.esm.d.ts:2278
(opens new window)

### # maxWidth

• maxWidth: `number`

Maximum width of the legend, in pixels

#### # Defined in

index.esm.d.ts:2282
(opens new window)

### # position

• position: `LayoutPosition`

Position of the legend.

`default` 'top'

#### # Defined in

index.esm.d.ts:2269
(opens new window)

### # reverse

• reverse: `boolean`

Legend will show datasets in reverse order.

`default` false

#### # Defined in

index.esm.d.ts:2292
(opens new window)

### # rtl

• rtl: `boolean`

true for rendering the legends from right to left.

#### # Defined in

index.esm.d.ts:2371
(opens new window)

### # textDirection

• textDirection: `string`

This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas

`default` canvas' default

#### # Defined in

index.esm.d.ts:2376
(opens new window)

### # title

• title: `Object`

#### # Type declaration

Name | Type | Description
--- | --- | ---
`color` | `Color` | Color of title `see` Defaults.color
`display` | `boolean` | Is the legend title displayed. `default` false
`font` | `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableChartContext`> | see Fonts
`padding?` | `number` | `ChartArea` | -
`position` | `"start"` | `"end"` | `"center"` | -
`text` | `string` | The string title.

#### # Defined in

index.esm.d.ts:2378
(opens new window)

## # Methods

### # onClick

▸ onClick(`e`, `legendItem`, `legend`): `void`

A callback that is called when a click event is registered on a label item.

#### # Parameters

Name | Type
--- | ---
`e` | `ChartEvent`
`legendItem` | `LegendItem`
`legend` | `LegendElement`<`TType`>

#### # Returns

`void`

#### # Defined in

index.esm.d.ts:2296
(opens new window)

### # onHover

▸ onHover(`e`, `legendItem`, `legend`): `void`

A callback that is called when a 'mousemove' event is registered on top of a label item

#### # Parameters

Name | Type
--- | ---
`e` | `ChartEvent`
`legendItem` | `LegendItem`
`legend` | `LegendElement`<`TType`>

#### # Returns

`void`

#### # Defined in

index.esm.d.ts:2300
(opens new window)

### # onLeave

▸ onLeave(`e`, `legendItem`, `legend`): `void`

A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.

#### # Parameters

Name | Type
--- | ---
`e` | `ChartEvent`
`legendItem` | `LegendItem`
`legend` | `LegendElement`<`TType`>

#### # Returns

`void`

#### # Defined in

index.esm.d.ts:2304
(opens new window)