# Interface: LegendOptions<TType>

# Type parameters

Name Type
TType extends ChartType

# Properties

# align

align: Align

Alignment of the legend.

Default

'center'

# Defined in

types/index.d.ts:2375 (opens new window)


# display

display: boolean

Is the legend shown?

Default

true

# Defined in

types/index.d.ts:2365 (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

types/index.d.ts:2388 (opens new window)


# labels

labels: Object

# Type declaration

Name Type Description
borderRadius number Override the borderRadius to use. Default undefined
boxHeight number Height of the coloured box. Default fontSize
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
pointStyleWidth number If usePointStyle is true, the width of the point style used for the legend.
textAlign? TextAlign Text alignment
useBorderRadius boolean Label borderRadius will match corresponding borderRadius. Default false
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 | [number, number] | Point | BubbleDataPoint)[], unknown>) => boolean Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data
generateLabels (chart: Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>) => LegendItem[] Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.
sort (a: LegendItem, b: LegendItem, data: ChartData<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>) => number Sorts the legend items

# Defined in

types/index.d.ts:2407 (opens new window)


# maxHeight

maxHeight: number

Maximum height of the legend, in pixels

# Defined in

types/index.d.ts:2379 (opens new window)


# maxWidth

maxWidth: number

Maximum width of the legend, in pixels

# Defined in

types/index.d.ts:2383 (opens new window)


# position

position: LayoutPosition

Position of the legend.

Default

'top'

# Defined in

types/index.d.ts:2370 (opens new window)


# reverse

reverse: boolean

Legend will show datasets in reverse order.

Default

false

# Defined in

types/index.d.ts:2393 (opens new window)


# rtl

rtl: boolean

true for rendering the legends from right to left.

# Defined in

types/index.d.ts:2483 (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's default

# Defined in

types/index.d.ts:2488 (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 "center" | "end" | "start" -
text string The string title.

# Defined in

types/index.d.ts:2490 (opens new window)

# Methods

# onClick

onClick(this, e, legendItem, legend): void

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

# Parameters

Name Type
this LegendElement<TType>
e ChartEvent
legendItem LegendItem
legend LegendElement<TType>

# Returns

void

# Defined in

types/index.d.ts:2397 (opens new window)


# onHover

onHover(this, e, legendItem, legend): void

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

# Parameters

Name Type
this LegendElement<TType>
e ChartEvent
legendItem LegendItem
legend LegendElement<TType>

# Returns

void

# Defined in

types/index.d.ts:2401 (opens new window)


# onLeave

onLeave(this, 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
this LegendElement<TType>
e ChartEvent
legendItem LegendItem
legend LegendElement<TType>

# Returns

void

# Defined in

types/index.d.ts:2405 (opens new window)