Skip to content
Back to skills

2267 Crosshair 2347c6e7

ASecurity

The 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
developmentjavascriptjava

Security analysis

A100/100

Pro scans all 2 files and shows the line behind each finding

Scanned May 31, 2026

npx -y skills add tools-only/X-Skills --skill 2267-crosshair_2347c6e7 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 2267 Crosshair 2347c6e7?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for 2267 Crosshair 2347c6e7
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/tools-only-2267-crosshair-2347c6e7/badge)](https://www.skillsdirectory.com/skills/tools-only-2267-crosshair-2347c6e7)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
# 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.md822 B
  • skill.md2.2 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.