VictoryCursorContainer

Adds a cursor to a chart to inspect coordinates.

info

For examples of VictoryCursorContainer in action, visit the Tooltips guide.

Inherited Props

VictoryContainerProps

• aria-describedby
• aria-labelledby
• children
• className
• containerId
• containerRef
• desc
• events
• height
• name
• origin
• ouiaId
• ouiaSafe
• ouiaType
• polar
• portalComponent
• portalZIndex
• preserveAspectRatio
• responsive
• role
• scale
• style
• tabIndex
• theme
• title
• width

Component Props

---

cursorComponent

type: ReactElementdefault: <LineSegment/>

The cursorComponent prop takes a component instance which will be used to render a cursor element. The new element created will be supplied with x1, y1, x2 and y2 positioning props. If a cursorComponent is not supplied, a new LineSegment component will be rendered.

---

cursorDimension

type: "x" || "y"

When the cursorDimension prop is set, the cursor will be a line to inspect the given dimension (either "x" or "y"). When this prop is not specified, the cursor will be a 2-dimensional crosshair. For example, if you would like to inspect the time of time-series data, set dimension={"x"}; the cursor will then be a vertical line that will inspect the time value of the current mouse position.

Live View

Loading...

Live Editor

<VictoryScatter
  containerComponent={
    <VictoryCursorContainer
      cursorDimension="x"
      cursorLabel={({ datum }) =>
        `${_.round(datum.x, 2)}, ${_.round(
          datum.y,
          2,
        )}`
      }
    />
  }
/>

---

cursorLabel

type: function

The cursorLabel prop defines the label that will appear next to the cursor. A label will only appear if cursorLabel is set. This prop should be given as a function of a point (an Object with x and y properties).

example: cursorLabel={(point) => point.x}

---

cursorLabelComponent

type: ReactElementdefault: <VictoryLabel/>

The cursorLabelComponent prop takes a component instance which will be used to render a label for the cursor. The new element created from the passed cursorLabelComponent will be supplied with the following props: x, y, active, text. If cursorLabelComponent is omitted, a new VictoryLabel will be created with the props described above.

---

cursorLabelOffset

type: number | { x: number, y: number }default: { x: 5, y: -10 }

The cursorLabelOffset prop determines the pixel offset of the cursor label from the cursor point. This prop should be an Object with x and y properties, or a number to be used for both dimensions.

---

defaultCursorValue

type: number | { x: number, y: number }

Whenever the mouse is not over the chart, the cursor will not be displayed. If instead you would like to keep it displayed, use the defaultCursorValue prop to set the default value. The prop should be a point (an Object with x and y properties) for 2-dimensional cursors, or a number for 1-dimensional cursors.

examples: defaultCursorValue={{x: 1, y: 1}}, defaultCursorValue={0}

---

disable

type: boolean

When the disable prop is set to true, VictoryCursorContainer events will not fire.

---

onCursorChange

type: function

If provided, the onCursorChange function will be called every time the cursor value changes. onCursorChange is called with value (the updated cursor value) and props (the props used by VictoryCursorContainer). A common use for onCursorChange is to save the cursor value to state and use it in another part of the view.

example: onCursorChange={(value, props) => this.setState({cursorValue: value})}