mochart

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.

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)).

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

closeOnClick ​

Whether to hide the tooltip when the user clicks/taps within it.

  • Default: true
  • Validation: should be a boolean

cornerRadius ​

The radius (in pixels) of the corners of the tooltip.

  • Default: 4
  • Validation: should be a number >= to 0

dropShadow ​

The drop shadow effect cast by the tooltip.

  • Default: { color: "rgba(0,0,0,0.3)", offsetX: 0, offsetY: 5, blurRadius: 10 }
  • Validation: should be an object with any of the properties { blurRadius, color, offsetX, offsetY }

dropShadow.blurRadius ​

The blur radius (in pixels) of the drop shadow effect used for the tooltip.

  • Default: 10
  • Validation: should be a number >= to 0

dropShadow.color ​

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")

dropShadow.offsetX ​

The x offset (in pixels) of the drop shadow effect used for the tooltip.

  • Default: 0
  • Validation: should be a number

dropShadow.offsetY ​

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 (must be false when followPointer is true).

  • Default: false
  • Validation: should be equal to false when followPointer is true; 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 or an empty string for none).

  • Default: null
  • Validation: should be a string or be equal to null

focusCategoryOnClick ​

Whether a click/tap on the category row of the tooltip should pin the focus on that category, so it stays focused after the tooltip closes (a second click releases it; must be false when followPointer is true).

  • Default: false
  • Validation: should be equal to false when followPointer is true; should be a boolean

focusCategoryOnHover ​

Whether category values should be focused when the user hovers the pointer over them in the tooltip (must be false when followPointer is true).

  • Default: false
  • Validation: should be equal to false when followPointer is true; 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 a click/tap on a series row of the tooltip should pin the focus on that series, so it stays focused after the pointer leaves (a second click releases it; must be false when followPointer is true).

  • Default: false
  • Validation: should be equal to false when followPointer is true; should be a boolean

focusSeriesOnHover ​

Whether series should be focused when the user hovers the pointer over them in the tooltip (must be false when followPointer is true).

Ignored while showControls is on, because there the controls' mode decides: a row's series focuses on hover while filter mode is active.

  • Default: false
  • Validation: should be equal to false when followPointer is true; should be a boolean

followPointer ​

Whether the tooltip should track the mouse position in the chart drawing area; a following tooltip ignores the pointer, so its rows and controls cannot be used and the on-click and on-hover settings and showControls must stay false.

A following tooltip moves with the pointer, so the pointer can never rest on it: the box is drawn with pointer-events: none, which lets series hover focus, clicks on the plot and its shapes, and closeOnClick work through it. Its rows and controls are unreachable, so showControls, filterSeriesOnClick, focusCategoryOnClick, focusSeriesOnClick, focusCategoryOnHover and focusSeriesOnHover are validation errors while it is on.

  • Default: false
  • Validation: should be a boolean

font ​

The font of the tooltip text (family, size, weight, style), each member falling back to chart.font when null.

  • Default: { family: null, size: null, weight: null, style: null }
  • Validation: should be an object with any of the properties { family, size, style, weight }
  • Used in: Font

font.family ​

The css font-family of the text, or null to leave the font family to css.

  • Default: null
  • Validation: should be a css font-family string with at least one character other than whitespace or be equal to null

font.size ​

The font size of the text, as a number of pixels or any css font-size string (a length with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function), or null to leave the font size to css.

  • Default: null
  • Validation: should be a number of pixels greater than 0, or a css font-size string (a length above 0 with a unit, a percentage, a size keyword, or a calc/clamp/min/max/var function) or be equal to null
  • Used in: Font

font.style ​

The css font-style of the text ("normal", "italic", "oblique"), or null to leave the font style to css.

  • Default: null
  • Validation: should be one of [ "normal", "italic", "oblique" ] or be equal to null

font.weight ​

The css font-weight of the text (100 to 900 in hundreds, or "normal", "bold", "lighter", "bolder"), or null to leave the font weight to css.

  • Default: null
  • Validation: should be one of [ 100, 200, 300, 400, 500, 600, 700, 800, 900, "normal", "bold", "lighter", "bolder" ] or be equal to null

icon ​

The series icons shown next to the series titles in the tooltip.

icon.borderStyle ​

The border drawn around series icons.

  • Default: { strokeColor: "currentColor", strokeOpacity: 0.65, strokeWidth: 1 }
  • Validation: should be an object with any of the properties { strokeColor, strokeOpacity, strokeWidth }

icon.borderStyle.strokeColor ​

The color of the border drawn around series icons: use "none" to switch the border off, or "currentColor" to follow the host page's css color.

  • Default: "currentColor"
  • Validation: should be a valid svg color (or "none" / "currentColor")

icon.borderStyle.strokeOpacity ​

The opacity (0 - 1) of the border drawn around series icons.

  • Default: 0.65
  • Validation: should be a number >= to 0 and <= 1

icon.borderStyle.strokeWidth ​

The width (in pixels) of the border drawn around series icons.

  • Default: 1
  • Validation: should be a number >= to 0

icon.filteredColor ​

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")

icon.showColors ​

Whether to show series colors next to series titles in the tooltip.

  • Default: true
  • Validation: should be a boolean

icon.showPlaceholders ​

Whether to show placeholder icons next to the series titles in the tooltip.

  • Default: true
  • Validation: should be a boolean

icon.showShapes ​

Whether to show the series marker shape next to series titles in the tooltip.

  • Default: true
  • Validation: should be a boolean

icon.size ​

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"

icon.spacing ​

The horizontal space (in pixels) to show between series icons and titles.

  • Default: 4
  • Validation: should be a number >= to 0

icon.unfilteredColor ​

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

lineSpacing ​

The space (in pixels) between each line of the tooltip.

  • Default: 3
  • Validation: should be a number >= to 0

missingValueText ​

The text to show for series that do not have defined values.

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 { bottom, left, right, top }

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

showCategory ​

Whether the category value should be shown as the first line of the tooltip.

  • Default:
    • false: when chart.type is pie
    • true: 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 (must be false when followPointer is true).

When true, a control strip renders above the tooltip lines: previous- and next-category 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 / focusSeriesOnHover settings are not consulted (focusCategoryOnHover 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 equal to false when followPointer is true; should be a boolean
  • Used in: Tooltip Controls

showFiltered ​

Whether to show series that have been filtered out of the chart in the tooltip.

  • Default: true
  • Validation: should be a boolean

showMissingValues ​

Whether to show series that do not have defined values in the tooltip.

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 pie
    • true: when chart.type is xy
  • Validation: should be a boolean

strikeThroughFiltered ​

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 valueAlign is 'left', where the label and the value are one piece of text and both are struck.

  • Default: false
  • Validation: should be a boolean

valueAlign ​

The horizontal alignment of the values shown in the tooltip (left, right): left runs the label and value together as one piece of text, right floats the values to the far edge.

  • Default: "right"
  • Validation: should be one of [ "left", "right" ]
  • Used in: Tooltip formatting

visible ​

Whether or not to show the tooltip.

  • Default: true
  • Validation: should be a boolean
  • Used in: Sparklines

Released under the MIT License.