# Interface: TooltipOptions<TType>
# Type parameters
Name | Type |
---|---|
TType | extends ChartType = ChartType |
# Hierarchy
-
↳
TooltipOptions
# Properties
# animation
• animation: AnimationSpec
<TType
>
# Defined in
index.esm.d.ts:2737 (opens new window)
# animations
• animations: AnimationsSpec
<TType
>
# Defined in
index.esm.d.ts:2738 (opens new window)
# axis
• axis: "x"
| "y"
| "xy"
| "r"
Can be set to 'x', 'y', 'xy' or 'r' to define which directions are used in calculating distances. Defaults to 'x' for 'index' mode and 'xy' in dataset and 'nearest' modes.
# Inherited from
# Defined in
index.esm.d.ts:1414 (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:2595 (opens new window)
# bodyAlign
• bodyAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the body text lines.
default
'left'
# Defined in
index.esm.d.ts:2645 (opens new window)
# bodyColor
• bodyColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of body
default
'#fff'
# Defined in
index.esm.d.ts:2635 (opens new window)
# bodyFont
• bodyFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts.
default
{}
# Defined in
index.esm.d.ts:2640 (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:2630 (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:2720 (opens new window)
# borderWidth
• borderWidth: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Size of the border.
default
0
# Defined in
index.esm.d.ts:2725 (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:2710 (opens new window)
# boxPadding
• boxPadding: number
Padding between the color box and the text.
default
1
# Defined in
index.esm.d.ts:2600 (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:2705 (opens new window)
# callbacks
• callbacks: TooltipCallbacks
<TType
, TooltipModel
<TType
>, TooltipItem
<TType
>>
# Defined in
index.esm.d.ts:2739 (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:2680 (opens new window)
# caretSize
• caretSize: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Size, in px, of the tooltip arrow.
default
5
# Defined in
index.esm.d.ts:2685 (opens new window)
# cornerRadius
• cornerRadius: Scriptable
<number
| BorderRadius
, ScriptableTooltipContext
<TType
>>
Radius of tooltip corner curves.
default
6
# Defined in
index.esm.d.ts:2690 (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:2700 (opens new window)
# enabled
• enabled: Scriptable
<boolean
, ScriptableTooltipContext
<TType
>>
Are on-canvas tooltips enabled?
default
true
# Defined in
index.esm.d.ts:2568 (opens new window)
# footerAlign
• footerAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the footer text lines.
default
'left'
# Defined in
index.esm.d.ts:2670 (opens new window)
# footerColor
• footerColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of footer
default
'#fff'
# Defined in
index.esm.d.ts:2660 (opens new window)
# footerFont
• footerFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts
default
{weight: 'bold'}
# Defined in
index.esm.d.ts:2665 (opens new window)
# footerMarginTop
• footerMarginTop: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Margin to add before drawing the footer.
default
6
# Defined in
index.esm.d.ts:2655 (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:2650 (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:1409 (opens new window)
# mode
• mode: keyof InteractionModeMap
Sets which elements appear in the tooltip. See Interaction Modes for details.
default
'nearest'
# Inherited from
# Defined in
index.esm.d.ts:1404 (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:2695 (opens new window)
# padding
• padding: Scriptable
<number
| ChartArea
, ScriptableTooltipContext
<TType
>>
Padding to add to the tooltip
default
6
# Defined in
index.esm.d.ts:2675 (opens new window)
# position
• position: Scriptable
<keyof TooltipPositionerMap
, ScriptableTooltipContext
<TType
>>
The mode for positioning the tooltip
# Defined in
index.esm.d.ts:2576 (opens new window)
# rtl
• rtl: Scriptable
<boolean
, ScriptableTooltipContext
<TType
>>
true for rendering the legends from right to left.
# Defined in
index.esm.d.ts:2729 (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:2735 (opens new window)
# titleAlign
• titleAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the title text lines.
default
'left'
# Defined in
index.esm.d.ts:2625 (opens new window)
# titleColor
• titleColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of title
default
'#fff'
# Defined in
index.esm.d.ts:2605 (opens new window)
# titleFont
• titleFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts
default
{weight: 'bold'}
# Defined in
index.esm.d.ts:2610 (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:2620 (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:2615 (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:2715 (opens new window)
# xAlign
• xAlign: Scriptable
<TooltipXAlignment
, ScriptableTooltipContext
<TType
>>
Override the tooltip alignment calculations
# Defined in
index.esm.d.ts:2581 (opens new window)
# yAlign
• yAlign: Scriptable
<TooltipYAlignment
, ScriptableTooltipContext
<TType
>>
# Defined in
index.esm.d.ts:2582 (opens new window)
# Methods
# external
▸ external(args
): void
See external tooltip section.
# Parameters
Name | Type |
---|---|
args | Object |
args.chart | Chart <keyof ChartTypeRegistry , (number | ScatterDataPoint | BubbleDataPoint )[], unknown > |
args.tooltip | TooltipModel <TType > |
# Returns
void
# Defined in
index.esm.d.ts:2572 (opens new window)
# filter
▸ filter(e
, index
, array
, data
): boolean
# Parameters
Name | Type |
---|---|
e | TooltipItem <TType > |
index | number |
array | TooltipItem <TType >[] |
data | ChartData <keyof ChartTypeRegistry , (number | ScatterDataPoint | BubbleDataPoint )[], unknown > |
# Returns
boolean
# Defined in
index.esm.d.ts:2589 (opens new window)
# itemSort
▸ itemSort(a
, b
, data
): number
Sort tooltip items.
# Parameters
Name | Type |
---|---|
a | TooltipItem <TType > |
b | TooltipItem <TType > |
data | ChartData <keyof ChartTypeRegistry , (number | ScatterDataPoint | BubbleDataPoint )[], unknown > |
# Returns
number