Observable Plot

Appearance

Crosshair mark ^0.6.7 ​

The crosshair mark shows the x (horizontal↔︎ position) and y (vertical↕︎ position) value of the point closest to the pointer on the bottom and left sides of the frame, respectively.

Fork
js
Plot.plot({
  marks: [
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "sex"}),
    Plot.crosshair(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
  ]
})

For charts which have a “dominant” dimension, such as time in a time-series chart, use the crosshairX or crosshairY mark for the pointerX or pointerY transform as appropriate.

Fork
js
Plot.plot({
  marks: [
    Plot.lineY(aapl, {x: "Date", y: "Close"}),
    Plot.crosshairX(aapl, {x: "Date", y: "Close"})
  ]
})

If either x or y is not specified, the crosshair is one-dimensional.

Fork
js
Plot.plot({
  marks: [
    Plot.tickX(penguins, {x: "body_mass_g"}),
    Plot.crosshairX(penguins, {x: "body_mass_g"})
  ]
})

The color option sets the fill color of the text and the stroke color of the rule. This option can be specified as a channel to reinforce a color encoding.

Fork
js
Plot.plot({
  marks: [
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "sex"}),
    Plot.crosshair(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", color: "sex", opacity: 0.5})
  ]
})

The crosshair mark does not currently support any format options; values are displayed with the default format. If you are interested in this feature, please upvote #1596. In the meantime, you can implement a custom crosshair using the pointer transform and a text mark.

Crosshair options ​

The following options are supported:

  • x - the horizontal position; bound to the x scale
  • y - the vertical position; bound to the y scale
  • color - shorthand for setting both ruleStroke and textFill
  • opacity - shorthand for setting ruleStrokeOpacity
  • ruleStroke - the rule stroke color
  • ruleStrokeOpacity - the rule stroke opacity; defaults to 0.2
  • ruleStrokeWidth - the rule stroke width; defaults to 1
  • textFill - the text fill color
  • textFillOpacity - the text fill opacity
  • textStroke - the text stroke color; defaults to white to improve legibility
  • textStrokeOpacity - the text stroke opacity; defaults to 1
  • textStrokeWidth - the text stroke width; defaults to 5
  • maxRadius - the maximum pointing distance, in pixels; defaults to 40

The crosshair mark supports faceting, but most other mark options are ignored.

crosshair(data, options) ​

js
Plot.crosshair(cars, {x: "economy (mpg)", y: "cylinders"})

Returns a new crosshair for the given data and options, drawing horizontal and vertical rules. The corresponding x and y values are also drawn just outside the bottom and left sides of the frame, respectively, typically on top of the axes. If either x or y is not specified, the crosshair will be one-dimensional.

crosshairX(data, options) ​

js
Plot.crosshairX(aapl, {x: "Date", y: "Close"})

Like crosshair, but using pointerX when x is the dominant dimension, like time in a time-series chart.

crosshairY(data, options) ​

js
Plot.crosshairY(aapl, {x: "Date", y: "Close"})

Like crosshair, but using pointerY when y is the dominant dimension.