Crosshair Config
Configure the crosshair styling and behavior when a category and/or series is focused (applies when chart.type is xy).
- Validation: should be an object with any of the properties {
applyFocus,categoryLine,seriesLine,showBehindTooltip,visible}
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.
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
categoryLine
The crosshair lines shown for the focused category.
- Default:
{ visible: true, style: { … } } - Validation: should be an object with any of the properties {
style,visible}
categoryLine.style
The style of these crosshair lines.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.3, strokeWidth: 3, strokeDashArray: "10, 5" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
categoryLine.style.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
categoryLine.style.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
categoryLine.style.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
categoryLine.style.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
categoryLine.visible
Whether or not these crosshair lines should be shown.
- Default:
true - Validation:
should be a boolean
seriesLine
The crosshair lines shown for the focused series.
- Default:
{ visible: true, style: { … } } - Validation: should be an object with any of the properties {
style,visible}
seriesLine.style
The style of these crosshair lines.
- Default:
{ strokeColor: "currentColor", strokeOpacity: 0.3, strokeWidth: 3, strokeDashArray: "10, 5" } - Validation: should be an object with any of the properties {
strokeColor,strokeDashArray,strokeOpacity,strokeWidth}
seriesLine.style.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
seriesLine.style.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
seriesLine.style.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
seriesLine.style.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
seriesLine.visible
Whether or not these crosshair lines should be shown.
- Default:
true - Validation:
should be a boolean
showBehindTooltip
Whether to show the crosshair lines for sections where they are overlapped by the tooltip.
- Default:
false - 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