mochart

Appearance

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.

  • 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

focusCategoryOnHover ​

Whether category values should be focused when the user hovers the pointer 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

focusSeriesOnHover ​

Whether series should be focused when the user hovers the pointer 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

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.

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

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.