Crosshair Interactions

Category: Tips and Interactions
Type: Interactive mark
Feature: Plot.crosshair()

Description

Crosshair marks display interactive overlays that follow the pointer and snap to the nearest data point. They provide visual feedback for data exploration by highlighting the closest point and displaying horizontal and vertical guide lines.

Use Cases

• Interactive data exploration on scatter plots
• Highlighting nearest points on line and area charts
• Multi-series comparisons with color-coded crosshairs
• Enhanced tooltips with visual guides
• Combining with other marks for layered interactivity

---

Basic Crosshair

A simple crosshair overlay on a scatter plot:

View Source

data:
  source: |
    [
      {"x": 10, "y": 25},
      {"x": 20, "y": 45},
      {"x": 30, "y": 35},
      {"x": 40, "y": 55},
      {"x": 50, "y": 40}
    ]
engine: plot
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: steelblue
      r: 5
  - type: crosshair
    configuration:
      x: x
      y: y

The crosshair will snap to the nearest data point as you move your pointer over the chart.

---

Crosshair with Color Encoding

Use color encoding to distinguish between categories:

View Source

data:
  source: |
    [
      {"x": 10, "y": 25, "category": "A"},
      {"x": 20, "y": 45, "category": "B"},
      {"x": 30, "y": 35, "category": "A"},
      {"x": 40, "y": 55, "category": "B"},
      {"x": 50, "y": 40, "category": "A"}
    ]
engine: plot
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: category
      r: 6
  - type: crosshair
    configuration:
      x: x
      y: y
      color: category
      opacity: 0.5

The crosshair color will match the category of the nearest point.

---

Custom Styling

Customize the crosshair appearance with stroke, opacity, and fill options:

View Source

data:
  source: |
    [
      {"x": 5, "y": 15},
      {"x": 15, "y": 35},
      {"x": 25, "y": 25},
      {"x": 35, "y": 45},
      {"x": 45, "y": 30}
    ]
engine: plot
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: coral
      r: 7
  - type: crosshair
    configuration:
      x: x
      y: y
      stroke: darkred
      strokeWidth: 2
      fill: coral
      fillOpacity: 0.2
      opacity: 0.7

---

Multi-Mark Chart with Crosshair

Combine crosshair with multiple mark types:

View Source

data:
  source: |
    [
      {"month": "Jan", "sales": 120, "costs": 80},
      {"month": "Feb", "sales": 150, "costs": 95},
      {"month": "Mar", "sales": 130, "costs": 85},
      {"month": "Apr", "sales": 170, "costs": 100},
      {"month": "May", "sales": 160, "costs": 90},
      {"month": "Jun", "sales": 190, "costs": 110}
    ]
engine: plot
scales:
  x:
    domain: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
marks:
  - type: line
    configuration:
      x: month
      y: sales
      stroke: steelblue
      strokeWidth: 2
  - type: line
    configuration:
      x: month
      y: costs
      stroke: coral
      strokeWidth: 2
  - type: dot
    configuration:
      x: month
      y: sales
      fill: steelblue
      r: 4
  - type: dot
    configuration:
      x: month
      y: costs
      fill: coral
      r: 4
  - type: crosshair
    configuration:
      x: month
      y: sales
      opacity: 0.4

---

Crosshair on Time Series

Track data points over time:

View Source

data:
  source: |
    [
      {"date": "2024-01", "value": 100},
      {"date": "2024-02", "value": 120},
      {"date": "2024-03", "value": 110},
      {"date": "2024-04", "value": 140},
      {"date": "2024-05", "value": 135},
      {"date": "2024-06", "value": 160}
    ]
engine: plot
marks:
  - type: area
    configuration:
      x: date
      y: value
      fill: steelblue
      fillOpacity: 0.3
  - type: line
    configuration:
      x: date
      y: value
      stroke: steelblue
      strokeWidth: 2
  - type: crosshair
    configuration:
      x: date
      y: value

---

Crosshair with Tips

Enable tooltips for additional information:

View Source

data:
  source: |
    [
      {"product": "A", "sales": 450, "profit": 120},
      {"product": "B", "sales": 320, "profit": 85},
      {"product": "C", "sales": 580, "profit": 155},
      {"product": "D", "sales": 290, "profit": 70},
      {"product": "E", "sales": 510, "profit": 140}
    ]
engine: plot
marks:
  - type: dot
    configuration:
      x: sales
      y: profit
      fill: steelblue
      r: 8
  - type: crosshair
    configuration:
      x: sales
      y: profit
      tip: true
      opacity: 0.6

The crosshair will display a tooltip showing the exact values at the nearest point.

---

Variable Size Crosshair

Adjust the radius (r) of the crosshair indicator:

View Source

data:
  source: |
    [
      {"x": 10, "y": 20, "size": 5},
      {"x": 20, "y": 40, "size": 10},
      {"x": 30, "y": 30, "size": 15},
      {"x": 40, "y": 50, "size": 8},
      {"x": 50, "y": 35, "size": 12}
    ]
engine: plot
marks:
  - type: dot
    configuration:
      x: x
      y: y
      r: 20
      fill: purple
      fillOpacity: 0.6
  - type: crosshair
    configuration:
      x: x
      y: y
      r: 12
      stroke: purple
      strokeWidth: 2
      opacity: 0.5

---

Tips and Best Practices

When to Use Crosshairs

• Scatter plots: Help identify exact coordinates of points
• Time series: Track values across time with visual guides
• Multi-series charts: Compare values across different series
• Dense data: Improve readability when many points overlap

Styling Recommendations

• Use opacity: 0.3-0.7 for subtle, non-intrusive guides
• Default stroke is currentColor which automatically adapts to light/dark themes
• Match color or fill to your data encoding for consistency
• Keep strokeWidth thin (1-2px) for clean visual guides
• Use fillOpacity for the highlight circle to maintain visibility

Performance Considerations

• Crosshairs work best with datasets under 10,000 points
• For larger datasets, consider sampling or aggregation
• Combine with other marks (dots, lines) for complete visualization

Accessibility

• Always provide alternative text descriptions for charts
• Ensure sufficient color contrast for crosshair elements
• Consider adding tip: true for keyboard navigation support

---

Configuration Options

Option	Type	Description	Example
x	string	Required. X-axis data field	x: "date"
y	string	Required. Y-axis data field	y: "value"
color	string	Color encoding field	color: "category"
fill	string	Fill color or field	fill: "steelblue"
stroke	string	Stroke color or field	stroke: "black"
opacity	number	Overall opacity (0-1)	opacity: 0.5
fillOpacity	number	Fill opacity (0-1)	fillOpacity: 0.3
strokeOpacity	number	Stroke opacity (0-1)	strokeOpacity: 0.8
strokeWidth	number	Line thickness	strokeWidth: 2
r	number	Highlight circle radius	r: 8
tip	boolean	Enable tooltips	tip: true
title	string	Tooltip content field	title: "label"

---

Related Examples

• Scatterplot with Interactive Tips
• Multi-Line Charts
• Interactive Visualizations

---

Generated for obsidian-d3 plugin - using Observable Plot's crosshair mark