# 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:2257 (opens new window)


# display

display: boolean

Is the legend shown?

default true

# Defined in

index.esm.d.ts:2247 (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:2270 (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:2289 (opens new window)


# maxHeight

maxHeight: number

Maximum height of the legend, in pixels

# Defined in

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


# maxWidth

maxWidth: number

Maximum width of the legend, in pixels

# Defined in

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


# position

position: LayoutPosition

Position of the legend.

default 'top'

# Defined in

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


# reverse

reverse: boolean

Legend will show datasets in reverse order.

default false

# Defined in

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


# rtl

rtl: boolean

true for rendering the legends from right to left.

# Defined in

index.esm.d.ts:2354 (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:2359 (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:2361 (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:2279 (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:2283 (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:2287 (opens new window)