Interface: TooltipOptions<TType>

Type parameters

Hierarchy

• CoreInteractionOptions

  ↳ TooltipOptions

Properties

animation

• animation: AnimationSpec<TType>

Defined in: index.esm.d.ts:2497 (opens new window)

animations

• animations: AnimationsSpec<TType>

Defined in: index.esm.d.ts:2498 (opens new window)

axis

• axis: x | y | xy

Can be set to ‘x’, ‘y’, or ‘xy’ to define 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:1343 (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:2360 (opens new window)

bodyAlign

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

Horizontal alignment of the body text lines.

default ‘left’

Defined in: index.esm.d.ts:2405 (opens new window)

bodyColor

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

Color of body

default ‘#fff’

Defined in: index.esm.d.ts:2395 (opens new window)

bodyFont

• bodyFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts.

default {}

Defined in: index.esm.d.ts:2400 (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:2390 (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:2480 (opens new window)

borderWidth

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

Size of the border.

default 0

Defined in: index.esm.d.ts:2485 (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:2470 (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:2465 (opens new window)

callbacks

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

Defined in: index.esm.d.ts:2499 (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:2440 (opens new window)

caretSize

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

Size, in px, of the tooltip arrow.

default 5

Defined in: index.esm.d.ts:2445 (opens new window)

cornerRadius

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

Radius of tooltip corner curves.

default 6

Defined in: index.esm.d.ts:2450 (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:2460 (opens new window)

enabled

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

Are on-canvas tooltips enabled?

default true

Defined in: index.esm.d.ts:2333 (opens new window)

filter

• filter: (e: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, index: number, array: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>[], data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>) => boolean

Type declaration:

▸ (e: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, index: number, array: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>[], data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>): boolean

Parameters:

Returns: boolean

Defined in: index.esm.d.ts:2354 (opens new window)

Defined in: index.esm.d.ts:2354 (opens new window)

footerAlign

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

Horizontal alignment of the footer text lines.

default ‘left’

Defined in: index.esm.d.ts:2430 (opens new window)

footerColor

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

Color of footer

default ‘#fff’

Defined in: index.esm.d.ts:2420 (opens new window)

footerFont

• footerFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {style: ‘bold’}

Defined in: index.esm.d.ts:2425 (opens new window)

footerMarginTop

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

Margin to add before drawing the footer.

default 6

Defined in: index.esm.d.ts:2415 (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:2410 (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:1338 (opens new window)

itemSort

• itemSort: (a: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, b: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>) => number

Sort tooltip items.

Type declaration:

▸ (a: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, b: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>): number

Parameters:

Returns: number

Defined in: index.esm.d.ts:2352 (opens new window)

Defined in: index.esm.d.ts:2352 (opens new window)

mode

• mode: x | y | dataset | index | point | nearest

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

default ‘nearest’

Inherited from: CoreInteractionOptions.mode

Defined in: index.esm.d.ts:1333 (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:2455 (opens new window)

padding

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

Padding to add to the tooltip

default 6

Defined in: index.esm.d.ts:2435 (opens new window)

position

• position: Scriptable<nearest | average, ScriptableTooltipContext<TType>>

The mode for positioning the tooltip

Defined in: index.esm.d.ts:2341 (opens new window)

rtl

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

true for rendering the legends from right to left.

Defined in: index.esm.d.ts:2489 (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:2495 (opens new window)

titleAlign

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

Horizontal alignment of the title text lines.

default ‘left’

Defined in: index.esm.d.ts:2385 (opens new window)

titleColor

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

Color of title

default ‘#fff’

Defined in: index.esm.d.ts:2365 (opens new window)

titleFont

• titleFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {style: ‘bold’}

Defined in: index.esm.d.ts:2370 (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:2380 (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:2375 (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:2475 (opens new window)

xAlign

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

Override the tooltip alignment calculations

Defined in: index.esm.d.ts:2346 (opens new window)

yAlign

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

Defined in: index.esm.d.ts:2347 (opens new window)

Methods

external

▸ external(args: { chart: Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown> ; tooltip: TooltipModel<TType> }): void

See external tooltip section.

Parameters:

Returns: void

Defined in: index.esm.d.ts:2337 (opens new window)