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

# # Interface: LegendElement<TType>

## # Type parameters

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

## # Hierarchy

- `Element`<`AnyObject`, `LegendOptions`<`TType`>>

- `LayoutItem`

  ↳ `LegendElement`

## # Properties

### # active

• `Readonly` active: `boolean`

#### # Inherited from

Element.active

#### # Defined in

element.d.ts:7
(opens new window)

### # bottom

• bottom: `number`

Bottom edge of the item. Set by layout system and cannot be used in update

#### # Inherited from

LayoutItem.bottom

#### # Defined in

layout.d.ts:41
(opens new window)

### # chart

• chart: `Chart`<`TType`, `DistributiveArray`<`ChartTypeRegistry`[`TType`][`"defaultDataPoint"`]>, `unknown`>

#### # Defined in

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

### # ctx

• ctx: `CanvasRenderingContext2D`

#### # Defined in

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

### # fullSize

• fullSize: `boolean`

if true, and the item is horizontal, then push vertical boxes down

#### # Inherited from

LayoutItem.fullSize

#### # Defined in

layout.d.ts:17
(opens new window)

### # height

• height: `number`

Height of item. Must be valid after update()

#### # Inherited from

LayoutItem.height

#### # Defined in

layout.d.ts:25
(opens new window)

### # left

• left: `number`

Left edge of the item. Set by layout system and cannot be used in update

#### # Inherited from

LayoutItem.left

#### # Defined in

layout.d.ts:29
(opens new window)

### # legendItems

• `Optional` legendItems: `LegendItem`[]

#### # Defined in

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

### # options

• options: `LegendOptions`<`TType`>

#### # Overrides

Element.options

#### # Defined in

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

### # position

• position: `LayoutPosition`

The position of the item in the chart layout. Possible values are

#### # Inherited from

LayoutItem.position

#### # Defined in

layout.d.ts:9
(opens new window)

### # right

• right: `number`

Right edge of the item. Set by layout system and cannot be used in update

#### # Inherited from

LayoutItem.right

#### # Defined in

layout.d.ts:37
(opens new window)

### # top

• top: `number`

Top edge of the item. Set by layout system and cannot be used in update

#### # Inherited from

LayoutItem.top

#### # Defined in

layout.d.ts:33
(opens new window)

### # weight

• weight: `number`

The weight used to sort the item. Higher weights are further away from the chart area

#### # Inherited from

LayoutItem.weight

#### # Defined in

layout.d.ts:13
(opens new window)

### # width

• width: `number`

Width of item. Must be valid after update()

#### # Inherited from

LayoutItem.width

#### # Defined in

layout.d.ts:21
(opens new window)

### # x

• `Readonly` x: `number`

#### # Inherited from

Element.x

#### # Defined in

element.d.ts:5
(opens new window)

### # y

• `Readonly` y: `number`

#### # Inherited from

Element.y

#### # Defined in

element.d.ts:6
(opens new window)

## # Methods

### # beforeLayout

▸ `Optional` beforeLayout(): `void`

Called before the layout process starts

#### # Returns

`void`

#### # Inherited from

LayoutItem.beforeLayout

#### # Defined in

layout.d.ts:46
(opens new window)

### # draw

▸ draw(`chartArea`): `void`

Draws the element

#### # Parameters

Name | Type
--- | ---
`chartArea` | `ChartArea`

#### # Returns

`void`

#### # Inherited from

LayoutItem.draw

#### # Defined in

layout.d.ts:50
(opens new window)

### # getPadding

▸ `Optional` getPadding(): `ChartArea`

Returns an object with padding on the edges

#### # Returns

`ChartArea`

#### # Inherited from

LayoutItem.getPadding

#### # Defined in

layout.d.ts:54
(opens new window)

### # getProps

▸ getProps<`P`>(`props`, `final?`): `Pick`<`AnyObject`, `P`[`number`]>

#### # Type parameters

Name | Type
--- | ---
`P` | extends `string`[]

#### # Parameters

Name | Type
--- | ---
`props` | `P`
`final?` | `boolean`

#### # Returns

`Pick`<`AnyObject`, `P`[`number`]>

#### # Inherited from

Element.getProps

#### # Defined in

element.d.ts:12
(opens new window)

### # hasValue

▸ hasValue(): `boolean`

#### # Returns

`boolean`

#### # Inherited from

Element.hasValue

#### # Defined in

element.d.ts:11
(opens new window)

### # isHorizontal

▸ isHorizontal(): `boolean`

returns true if the layout item is horizontal (ie. top or bottom)

#### # Returns

`boolean`

#### # Inherited from

LayoutItem.isHorizontal

#### # Defined in

layout.d.ts:58
(opens new window)

### # tooltipPosition

▸ tooltipPosition(`useFinalPosition?`): `Point`

#### # Parameters

Name | Type
--- | ---
`useFinalPosition?` | `boolean`

#### # Returns

`Point`

#### # Inherited from

Element.tooltipPosition

#### # Defined in

element.d.ts:10
(opens new window)

### # update

▸ update(`width`, `height`, `margins?`): `void`

Takes two parameters: width and height.

#### # Parameters

Name | Type
--- | ---
`width` | `number`
`height` | `number`
`margins?` | `ChartArea`

#### # Returns

`void`

#### # Inherited from

LayoutItem.update

#### # Defined in

layout.d.ts:64
(opens new window)