Back to skills
SKILL.md
2267 Crosshair 2347c6e7
ASecurityThe crosshair mark displays x and y values for the nearest data point as the pointer moves.
- 9 stars
- 0 votes
- 0 copies
- 1 view
- Added May 31, 2026
Security analysis
100/100Pro scans all 2 files and shows the line behind each finding
npx -y skills add tools-only/X-Skills --skill 2267-crosshair_2347c6e7 --agent claude-codeAre you the author of 2267 Crosshair 2347c6e7?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tools-only-2267-crosshair-2347c6e7)# Crosshair Mark
The crosshair mark displays x and y values for the nearest data point as the pointer moves.
## Constructors
```javascript
Plot.crosshair(data, options) // Two-dimensional
Plot.crosshairX(data, options) // X-axis dominant (time series)
Plot.crosshairY(data, options) // Y-axis dominant
```
## Channels
| Channel | Description |
|---------|-------------|
| `x`, `y` | Position (one can be omitted) |
## Examples
### Basic Crosshair
```javascript
Plot.plot({
marks: [
Plot.line(data, {x: "date", y: "value"}),
Plot.crosshair(data, {x: "date", y: "value"})
]
})
```
### Time Series (X-dominant)
```javascript
Plot.plot({
marks: [
Plot.lineY(data, {x: "date", y: "value"}),
Plot.crosshairX(data, {x: "date", y: "value"})
]
})
```
### One-dimensional Crosshair
```javascript
Plot.plot({
marks: [
Plot.dot(data, {x: "x", y: "y"}),
Plot.crosshair(data, {x: "x"}) // Only x
]
})
```
### Custom Styling
```javascript
Plot.crosshair(data, {
x: "x",
y: "y",
color: "red",
ruleStrokeWidth: 2
}).plot()
```
## Options
| Option | Default | Description |
|--------|---------|-------------|
| `x`, `y` | - | Position channels |
| `color` | - | Sets both ruleStroke and textFill |
| `opacity` | - | Sets ruleStrokeOpacity |
| `ruleStroke` | - | Rule line color |
| `ruleStrokeOpacity` | 0.2 | Rule transparency |
| `ruleStrokeWidth` | 1 | Rule thickness |
| `textFill` | - | Text color |
| `textFillOpacity` | - | Text transparency |
| `textStroke` | white | Text halo color |
| `textStrokeOpacity` | 1 | Halo opacity |
| `textStrokeWidth` | 5 | Halo thickness |
| `maxRadius` | 40 | Maximum pointing distance |
## Comparison to Tip
| Feature | Crosshair | Tip |
|---------|-----------|-----|
| Display | Rules + axis labels | Floating box |
| Position | Along axes | Near point |
| Values shown | x and y | All channels |
| Format customization | Limited | Extensive |
## Notes
- Values display on bottom and left sides of the frame
- Uses pointer transform internally
- One dimension can be omitted for one-dimensional display
- Limited formatting options (use tip for custom formats)
- Supports faceting but ignores most other mark options
Files in this skill
- README.md
- skill.md
Attribution
Comments
Loading comments…
Newsletter
Get the weekly list of safe new skills, and the ones we pulled.