Interface: TooltipOptions<TType>

Type parameters

Hierarchy

• CoreInteractionOptions

  ↳ TooltipOptions

Properties

animation

• animation: AnimationSpec<TType>

Defined in

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

animations

• animations: AnimationsSpec<TType>

Defined in

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

axis

• axis: InteractionAxis

Defines which directions are used in calculating distances. Defaults to ‘x’ for ‘index’ mode and ‘xy’ in dataset and ‘nearest’ modes.

Inherited from

CoreInteractionOptions.axis

Defined in

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

backgroundColor

• backgroundColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Background color of the tooltip.

default ‘rgba(0, 0, 0, 0.8)’

Defined in

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

bodyAlign

• bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the body text lines.

default ‘left’

Defined in

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

bodyColor

• bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of body

default ‘#fff’

Defined in

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

bodyFont

• bodyFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>

See Fonts.

default {}

Defined in

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

bodySpacing

• bodySpacing: Scriptable<number, ScriptableTooltipContext<TType>>

Spacing to add to top and bottom of each tooltip item.

default 2

Defined in

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

borderColor

• borderColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of the border.

default ‘rgba(0, 0, 0, 0)’

Defined in

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

borderWidth

• borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Size of the border.

default 0

Defined in

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

boxHeight

• boxHeight: Scriptable<number, ScriptableTooltipContext<TType>>

Height of the color box if displayColors is true.

default bodyFont.size

Defined in

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

boxPadding

• boxPadding: number

Padding between the color box and the text.

default 1

Defined in

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

boxWidth

• boxWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Width of the color box if displayColors is true.

default bodyFont.size

Defined in

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

callbacks

• callbacks: TooltipCallbacks<TType, TooltipModel<TType>, TooltipItem<TType>>

Defined in

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

caretPadding

• caretPadding: Scriptable<number, ScriptableTooltipContext<TType>>

Extra distance to move the end of the tooltip arrow away from the tooltip point.

default 2

Defined in

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

caretSize

• caretSize: Scriptable<number, ScriptableTooltipContext<TType>>

Size, in px, of the tooltip arrow.

default 5

Defined in

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

cornerRadius

• cornerRadius: Scriptable<number | BorderRadius, ScriptableTooltipContext<TType>>

Radius of tooltip corner curves.

default 6

Defined in

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

displayColors

• displayColors: Scriptable<boolean, ScriptableTooltipContext<TType>>

If true, color boxes are shown in the tooltip.

default true

Defined in

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

enabled

• enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>

Are on-canvas tooltips enabled?

default true

Defined in

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

footerAlign

• footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the footer text lines.

default ‘left’

Defined in

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

footerColor

• footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of footer

default ‘#fff’

Defined in

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

footerFont

• footerFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>

See Fonts

default {weight: ‘bold’}

Defined in

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

footerMarginTop

• footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add before drawing the footer.

default 6

Defined in

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

footerSpacing

• footerSpacing: Scriptable<number, ScriptableTooltipContext<TType>>

Spacing to add to top and bottom of each footer line.

default 2

Defined in

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

includeInvisible

• includeInvisible: boolean

if true, the invisible points that are outside of the chart area will also be included when evaluating interactions.

default false

Inherited from

CoreInteractionOptions.includeInvisible

Defined in

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

intersect

• intersect: boolean

if true, the hover mode only applies when the mouse position intersects an item on the chart.

default true

Inherited from

CoreInteractionOptions.intersect

Defined in

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

mode

• mode: keyof InteractionModeMap

Sets which elements appear in the tooltip. See Interaction Modes for details.

default ‘nearest’

Inherited from

CoreInteractionOptions.mode

Defined in

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

multiKeyBackground

• multiKeyBackground: Scriptable<Color, ScriptableTooltipContext<TType>>

Color to draw behind the colored boxes when multiple items are in the tooltip.

default ‘#fff’

Defined in

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

padding

• padding: Scriptable<number | ChartArea, ScriptableTooltipContext<TType>>

Padding to add to the tooltip

default 6

Defined in

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

position

• position: Scriptable<keyof TooltipPositionerMap, ScriptableTooltipContext<TType>>

The mode for positioning the tooltip

Defined in

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

rtl

• rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>

true for rendering the legends from right to left.

Defined in

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

textDirection

• textDirection: Scriptable<string, ScriptableTooltipContext<TType>>

This will force the text direction ‘rtl’ or ‘ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas

default canvas’s default

Defined in

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

titleAlign

• titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the title text lines.

default ‘left’

Defined in

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

titleColor

• titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of title

default ‘#fff’

Defined in

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

titleFont

• titleFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>

See Fonts

default {weight: ‘bold’}

Defined in

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

titleMarginBottom

• titleMarginBottom: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add on bottom of title section.

default 6

Defined in

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

titleSpacing

• titleSpacing: Scriptable<number, ScriptableTooltipContext<TType>>

Spacing to add to top and bottom of each title line.

default 2

Defined in

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

usePointStyle

• usePointStyle: Scriptable<boolean, ScriptableTooltipContext<TType>>

Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight)

default false

Defined in

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

xAlign

• xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>

Override the tooltip alignment calculations

Defined in

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

yAlign

• yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>

Defined in

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

Methods

external

▸ external(args): void

See external tooltip section.

Parameters

Returns

void

Defined in

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

filter

▸ filter(e, index, array, data): boolean

Parameters

Returns

boolean

Defined in

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

itemSort

▸ itemSort(a, b, data): number

Sort tooltip items.

Parameters

Returns

number

Defined in

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