Skip to content

Crosshair Config

Configure the crosshair styling and behavior when a category and/or series is focused.

Every property is optional and falls back to its default. Property anchors are stable: link to any entry as #crosshair.propertyName, and to a member of a nested property as #crosshair.propertyName.memberName.

Properties

applyFocus

Whether to change the focused category as the crosshairs are shown or hidden, and as the pointer moves when the tooltip's followPointer is on.

  • Default: true
  • Validation: should be a boolean

categoryLineStyle

The style of the crosshair lines shown for the focused category.

  • Default: { strokeColor: "currentColor", strokeOpacity: 0.3, strokeWidth: 3, strokeDashArray: "10, 5" }
  • Validation: should be an object with any of the properties { strokeColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, strokeOpacity: 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, strokeDashArray: should be a valid dash array or be equal to null }

categoryLineStyle.strokeColor

The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.

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

categoryLineStyle.strokeDashArray

The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.

  • Default: "10, 5"
  • Validation: should be a valid dash array or be equal to null

categoryLineStyle.strokeOpacity

The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.

  • Default: 0.3
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

categoryLineStyle.strokeWidth

The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.

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

seriesLineStyle

The style of the crosshair lines shown for the focused series.

  • Default: { strokeColor: "currentColor", strokeOpacity: 0.3, strokeWidth: 3, strokeDashArray: "10, 5" }
  • Validation: should be an object with any of the properties { strokeColor: should be a valid svg color (or "none" / "currentColor") or be equal to null, strokeOpacity: 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, strokeDashArray: should be a valid dash array or be equal to null }

seriesLineStyle.strokeColor

The color of the stroke (outline): use null to leave the svg stroke attribute unset so that css can supply it, "none" to switch the stroke off, or "currentColor" to follow the host page's css color.

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

seriesLineStyle.strokeDashArray

The dash array pattern of the stroke (e.g. "5, 5"), or null for a solid stroke.

  • Default: "10, 5"
  • Validation: should be a valid dash array or be equal to null

seriesLineStyle.strokeOpacity

The opacity (0 - 1) of the stroke, or null to leave the svg stroke-opacity attribute unset.

  • Default: 0.3
  • Validation: should be a number >= to 0 and <= 1 or be equal to null

seriesLineStyle.strokeWidth

The width (in pixels) of the stroke, or null to leave the svg stroke-width attribute unset.

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

showBehindTooltip

Whether to show the crosshair lines for sections where they are overlapped by the tooltip.

  • Default: false
  • Validation: should be a boolean

showCategory

Whether or not crosshair lines for focused categories should be shown.

  • Default: true
  • Validation: should be a boolean

showSeries

Whether or not crosshair lines for focused series should be shown.

  • Default: true
  • Validation: should be a boolean

visible

Whether or not crosshairs should be shown when a category or series is focused.

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

Released under the BSD-3-Clause License.