Tooltip Config
Configure the chart tooltip styling and behavior.
Every property is optional and falls back to its default. Property anchors are stable: link to any entry as #tooltip.propertyName, and to a member of a nested property as #tooltip.propertyName.memberName.
Properties
adjustForFiltering
Whether to adjust the series values when series filtering changes.
- Default:
true - Validation:
should be a boolean
adjustSizeForFiltering
Whether to adjust the width of the tooltip when the series values change due to filtering changes.
- Default:
false - Validation:
should be a boolean
applyFocus
Whether to change the focused category as the tooltip is shown or hidden, and as it tracks the pointer when followPointer is on.
- Default:
true - Validation:
should be a boolean
backgroundStyle
The styles to apply to the tooltip box (strokeColor, strokeOpacity, strokeWidth, fillColor, fillOpacity (use null for none)).
- Default:
{ strokeColor: "rgba(0,0,0,0.3)", strokeOpacity: null, strokeWidth: 2, fillColor: "rgba(255,255,255,0.9)", fillOpacity: null } - Validation:
should be an object with any of the properties { strokeColor: should be a valid css color (or "currentColor") or be equal to null, strokeOpacity: should be a number >= to 0 and <= 1 or be equal to null, fillColor: should be a valid css color (or "currentColor") or be equal to null, fillOpacity: should be a number >= to 0 and <= 1 or be equal to null, strokeWidth: should be a number >= to 0 or be equal to null }
backgroundStyle.fillColor
The background color for the interior of the tooltip (use null for none).
- Default:
rgba(255,255,255,0.9) - Validation:
should be a valid css color (or "currentColor") or be equal to null
backgroundStyle.fillOpacity
The opacity (0 - 1) to composite into the background color, or null to use the color exactly as written.
- Default:
null - Validation:
should be a number >= to 0 and <= 1 or be equal to null
backgroundStyle.strokeColor
The color of the border around the tooltip (use null for none).
- Default:
rgba(0,0,0,0.3) - Validation:
should be a valid css color (or "currentColor") or be equal to null
backgroundStyle.strokeOpacity
The opacity (0 - 1) to composite into the border color, or null to use the color exactly as written.
- Default:
null - Validation:
should be a number >= to 0 and <= 1 or be equal to null
backgroundStyle.strokeWidth
The width (in pixels) of the border around the tooltip (use null for none).
- Default:
2 - Validation:
should be a number >= to 0 or be equal to null
borderRadius
The radius (in pixels) of the corners of the tooltip.
- Default:
4 - Validation:
should be a number >= to 0
closeOnClick
Whether to hide the tooltip when the user clicks/taps within it.
- Default:
true - Validation:
should be a boolean
dropShadowBlurRadius
The blur radius (in pixels) of the drop shadow effect used for the tooltip.
- Default:
10 - Validation:
should be a number >= to 0
dropShadowColor
The color of the drop shadow effect used for the tooltip.
- Default:
rgba(0,0,0,0.3) - Validation:
should be a valid css color (or "currentColor")
dropShadowOffsetX
The x offset (in pixels) of the drop shadow effect used for the tooltip.
- Default:
0 - Validation:
should be a number
dropShadowOffsetY
The y offset (in pixels) of the drop shadow effect used for the tooltip.
- Default:
5 - Validation:
should be a number
filterModeText
The text shown on the tooltip controls’ mode button while filter mode is active.
The visible text of the mode button while clicking a series row filters its series. Replace to localize it.
- Default:
"Filter" - Validation:
should be a string
filterSeriesOnClick
Whether series should be filtered when the user clicks/taps on them in the tooltip.
- Default:
false - Validation:
should be a boolean
filteredValueCharacter
The character to show in place of each digit of a series value that has been filtered (use null for none).
- Default:
"-" - Validation:
should be a string with length 1 or be equal to null
filteredValueText
The text to show for series that have been filtered (use null for none).
- Default:
null - Validation:
should be a string or be equal to null
focusCategoryOnClick
Whether category values should be focused when the user clicks/taps on them in the tooltip.
- Default:
false - Validation:
should be a boolean
focusCategoryOnMouseOver
Whether category values should be focused when the user mouses over them in the tooltip.
- Default:
false - Validation:
should be a boolean
focusModeText
The text shown on the tooltip controls’ mode button while focus mode is active.
The visible text of the mode button while clicking a row focuses its series or category. Replace to localize it.
- Default:
"Focus" - Validation:
should be a string
focusSeriesOnClick
Whether series should be focused when the user clicks/taps on them in the tooltip.
- Default:
false - Validation:
should be a boolean
focusSeriesOnMouseOver
Whether series should be focused when the user mouses over them in the tooltip.
Ignored while showControls is on — there the controls’ mode decides: a row’s series focuses on hover while filter mode is active.
- Default:
false - Validation:
should be a boolean
followPointer
Whether the tooltip should track the mouse position in the chart drawing area.
- Default:
false - Validation:
should be a boolean
hideFiltered
Whether to hide series that have been filtered from the tooltip.
- Default:
false - Validation:
should be a boolean
iconBorderColor
The color of the border drawn around series icons.
- Default:
"currentColor" - Validation:
should be a valid svg color (or "none" / "currentColor")
iconBorderOpacity
The opacity (0 - 1) of the border drawn around series icons.
- Default:
0.65 - Validation:
should be a number >= to 0 and <= 1
iconBorderSize
The width (in pixels) of the border drawn around series icons.
- Default:
1 - Validation:
should be a number >= to 0
iconFilteredColor
The color to use for the series icon when the corresponding series is filtered.
- Default:
rgba(255,255,255,0) - Validation:
should be a valid svg color (or "none" / "currentColor")
iconSize
The width and height (in pixels) of the series icons, or "auto" to match the inherited font size.
- Default:
"auto" - Validation:
should be a number >= to 0 or be equal to "auto"
iconSpacerSize
The horizontal space (in pixels) to show between series icons and titles.
- Default:
4 - Validation:
should be a number >= to 0
iconUnfilteredColor
The color to use for the placeholder series icons when the corresponding series is not filtered.
- Default:
rgba(0,0,0,0.5) - Validation:
should be a valid svg color (or "none" / "currentColor")
keepInside
Whether to keep the tooltip within the series drawing area (true) or allow it to overlap the axes (false).
- Default:
false - Validation:
should be a boolean
linePadding
The padding (in pixels) between each line of the tooltip.
- Default:
3 - Validation:
should be a number >= to 0
minWidth
The minimum width (in pixels) for the tooltip.
- Default:
120 - Validation:
should be a number >= to 0
missingValueText
The text to show for series that do not have defined values.
- Default:
"N/A" - Validation:
should be a string - Used in: Missing Values · Missing Pos/Neg Stacked Values · Tooltip Controls
padding
The padding (in pixels) for the top, right, bottom and left sides of the tooltip.
- Default:
{ top: 2, right: 2, bottom: 2, left: 2 } - Validation:
should be an object with any of the properties { top: should be a number >= to 0, right: should be a number >= to 0, bottom: should be a number >= to 0, left: should be a number >= to 0 }
padding.bottom
The space (in pixels) along the bottom edge.
- Default:
2 - Validation:
should be a number >= to 0
padding.left
The space (in pixels) along the left edge.
- Default:
2 - Validation:
should be a number >= to 0
padding.right
The space (in pixels) along the right edge.
- Default:
2 - Validation:
should be a number >= to 0
padding.top
The space (in pixels) along the top edge.
- Default:
2 - Validation:
should be a number >= to 0
rangeValueSeparator
The text to use when joining the values for a series that has more than one value.
- Default:
" - " - Validation:
should be a string
rightAlignValues
Whether to right-align the values shown in the tooltip.
- Default:
true - Validation:
should be a boolean - Used in: Tooltip formatting
showCategory
Whether the category value should be shown as the first line of the tooltip.
- Default:
false— when chart.type is pietrue— when chart.type is xy
- Validation:
should be a boolean
showControls
Whether the focus/filter controls should be shown at the top of the tooltip.
When true, a control strip renders above the tooltip lines: ‹ and › buttons step the shown category, and a mode button toggles what clicking a tooltip row does. In filter mode (the initial mode) a series row toggles its series out of the chart like a legend click (filterable permitting), and hovering a series row focuses its series like hovering its legend item; in focus mode a row click pins focus on its series or category. With the controls shown, the mode decides click and series-hover behavior — the focus…OnClick / filterSeriesOnClick / focusSeriesOnMouseOver settings are not consulted (focusCategoryOnMouseOver still is). The mode button shows the active mode via filterModeText / focusModeText, and the step buttons are labeled for assistive tech by accessibility.tooltipPreviousLabel / tooltipNextLabel.
- Default:
false - Validation:
should be a boolean - Used in: Tooltip Controls
showFilteringOnLabels
Whether to strike through the label text of filtered series.
When true, the label of a series that has been filtered out of the chart is drawn with a line through it. The strike-through covers the label only, so the value beside it stays legible — except when rightAlignValues is false, where the label and the value are one piece of text and both are struck.
- Default:
false - Validation:
should be a boolean
showIconColors
Whether to show series colors next to series titles in the tooltip.
- Default:
true - Validation:
should be a boolean
showIconPlaceholders
Whether to show placeholder icons next to the series titles in the tooltip.
- Default:
true - Validation:
should be a boolean
showIconShapes
Whether to show series marker shape next to series titles in the tooltip.
- Default:
true - Validation:
should be a boolean
showMissingValues
Whether to show series that do not have defined values in the tooltip.
- Default:
true - Validation:
should be a boolean - Used in: Missing Values · Missing Pos/Neg Stacked Values · Tooltip Controls
snapToCategory
Whether the tooltip should be centered at the closest category value (true) or at the click/tap position (false).
- Default:
false— when chart.type is pietrue— when chart.type is xy
- Validation:
should be a boolean
visible
Whether or not to show the tooltip.
- Default:
true - Validation:
should be a boolean - Used in: Sparklines