Pointer events

Github logo Edit on GitHub

Supported events

Pointer events are supported on the containing Chart element and on most child elements. In the case of data series, the handlers are passed on to the child data points. The following handler props can be declared:

  • onPointerDown
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Check out this article to learn more about the mental model behind pointer events. MDN is the best place to get detailed info on when each event will fire. Finally, the React docs are always worth a look.

Event data

Hypocube re-maps the Event passed to the handler so that the relevent coordinates on the Cartesian data scales are available. To see this, try clicking on the bars in the chart below - and have a look at your console.

Notice that the elementPosition corresponds to the real position of the data point. Similarly, the coordinates of pointerPosition correspond to the event position on the Cartesian scale.

In detail, the ChartEvent object has the following properties:

eventSyntheticEvent
The original React SyntheticEvent.
elementPosition[number, number]
The coordinates of the element interacted with, on the Cartesian scale. For data points, this is the semantically meaningful position of the data.
pointerPosition[number, number]
The position of the pointer, on the Cartesian scale.
modifiersstring[]
Array of modifier keys held down during the interaction; ie "shift", "ctrl", "alt".
meta
When an object containing arbitrary data is passed to a component as `handlerMeta`, that same data will be passed back to the event handler as `meta` data. This is useful when the same event handler is passed to different components, for example in a chart with multiple series. In such a case the series name can be passed as a meta data.
Previous
Interaction
Next
Tooltips