# Interface: TooltipOptions<TType>
# Type parameters
Name | Type |
---|---|
TType | extends ChartType |
# Hierarchy
-
↳
TooltipOptions
# Properties
# animation
• animation: AnimationSpec
<TType
>
# Defined in
index.esm.d.ts:2616 (opens new window)
# animations
• animations: AnimationsSpec
<TType
>
# Defined in
index.esm.d.ts:2617 (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
# Defined in
index.esm.d.ts:1362 (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:2479 (opens new window)
# bodyAlign
• bodyAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the body text lines.
default
'left'
# Defined in
index.esm.d.ts:2524 (opens new window)
# bodyColor
• bodyColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of body
default
'#fff'
# Defined in
index.esm.d.ts:2514 (opens new window)
# bodyFont
• bodyFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts.
default
{}
# Defined in
index.esm.d.ts:2519 (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:2509 (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:2599 (opens new window)
# borderWidth
• borderWidth: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Size of the border.
default
0
# Defined in
index.esm.d.ts:2604 (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:2589 (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:2584 (opens new window)
# callbacks
• callbacks: TooltipCallbacks
<TType
, TooltipModel
<TType
>, TooltipItem
<TType
>>
# Defined in
index.esm.d.ts:2618 (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:2559 (opens new window)
# caretSize
• caretSize: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Size, in px, of the tooltip arrow.
default
5
# Defined in
index.esm.d.ts:2564 (opens new window)
# cornerRadius
• cornerRadius: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Radius of tooltip corner curves.
default
6
# Defined in
index.esm.d.ts:2569 (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:2579 (opens new window)
# enabled
• enabled: Scriptable
<boolean
, ScriptableTooltipContext
<TType
>>
Are on-canvas tooltips enabled?
default
true
# Defined in
index.esm.d.ts:2452 (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
, index
, array
, data
): boolean
# Parameters
Name | Type |
---|---|
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 > |
# Returns
boolean
# Defined in
index.esm.d.ts:2473 (opens new window)
# footerAlign
• footerAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the footer text lines.
default
'left'
# Defined in
index.esm.d.ts:2549 (opens new window)
# footerColor
• footerColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of footer
default
'#fff'
# Defined in
index.esm.d.ts:2539 (opens new window)
# footerFont
• footerFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts
default
{weight: 'bold'}
# Defined in
index.esm.d.ts:2544 (opens new window)
# footerMarginTop
• footerMarginTop: Scriptable
<number
, ScriptableTooltipContext
<TType
>>
Margin to add before drawing the footer.
default
6
# Defined in
index.esm.d.ts:2534 (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:2529 (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:1357 (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
# Type declaration
▸ (a
, b
, data
): number
Sort tooltip items.
# Parameters
Name | Type |
---|---|
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 > |
# Returns
number
# Defined in
index.esm.d.ts:2471 (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
# Defined in
index.esm.d.ts:1352 (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:2574 (opens new window)
# padding
• padding: Scriptable
<number
| ChartArea
, ScriptableTooltipContext
<TType
>>
Padding to add to the tooltip
default
6
# Defined in
index.esm.d.ts:2554 (opens new window)
# position
• position: Scriptable
<"nearest"
| "average"
, ScriptableTooltipContext
<TType
>>
The mode for positioning the tooltip
# Defined in
index.esm.d.ts:2460 (opens new window)
# rtl
• rtl: Scriptable
<boolean
, ScriptableTooltipContext
<TType
>>
true for rendering the legends from right to left.
# Defined in
index.esm.d.ts:2608 (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:2614 (opens new window)
# titleAlign
• titleAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Horizontal alignment of the title text lines.
default
'left'
# Defined in
index.esm.d.ts:2504 (opens new window)
# titleColor
• titleColor: Scriptable
<Color
, ScriptableTooltipContext
<TType
>>
Color of title
default
'#fff'
# Defined in
index.esm.d.ts:2484 (opens new window)
# titleFont
• titleFont: Scriptable
<FontSpec
, ScriptableTooltipContext
<TType
>>
See Fonts
default
{weight: 'bold'}
# Defined in
index.esm.d.ts:2489 (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:2499 (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:2494 (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:2594 (opens new window)
# xAlign
• xAlign: Scriptable
<TextAlign
, ScriptableTooltipContext
<TType
>>
Override the tooltip alignment calculations
# Defined in
index.esm.d.ts:2465 (opens new window)
# yAlign
• yAlign: Scriptable
<TooltipYAlignment
, ScriptableTooltipContext
<TType
>>
# Defined in
index.esm.d.ts:2466 (opens new window)
# Methods
# external
▸ external(args
): void
See external tooltip section.
# Parameters
Name | Type |
---|---|
args | Object |
args.chart | Chart <"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar" , (number | ScatterDataPoint | BubbleDataPoint )[], unknown > |
args.tooltip | TooltipModel <TType > |
# Returns
void