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