Functional

These hooks allow you to do specific precoded functionalities.

Currently we support following functional hooks:

• useAxisZoom
• useRectangularZoom
• useAxisWheelZoom
• useCrossHair
• usePan

useAxisZoom

This hook allows to zoom in a plot along the specified axis (default to horizontal) while drawing a rectangle. There are 3 steps in order to implement the zoom:

• wrap your plot component in <PlotController>
• add the hook: const zoom = useAxisZoom({direction:'horizontal'});
• add the zoom.annotations in order to draw the zoom rectangle: <Annotations>{zoom.annotations}</Annotations>

This hook also implements the double click detection to reset the zoom to its original value.

useRectangularZoom

This hook allows to directly manage the zoom in a plot. There are 3 steps in order to implement the zoom:

• wrap your plot component in <PlotController>
• add the hook: const zoom = useRectangularZoom();
• add the zoom.annotations in order to draw the zoom rectangle: <Annotations>{zoom.annotations}</Annotations>

This hook also implements the double click detection to reset the zoom to its original value.

If a PlotController contains several Plot elements, the change will be applied on all of them.

useAxisWheelZoom

This hook allows to zoom in a plot along the specified axis (default to vertical) using mouse wheel.

The hook may be customized with following props:

• center : it defines zoom center, used to choose a specific point or the mouse cursor "pointer" as zoom center
  type : number | "pointer"
  default : 0

• factor : controls zoom speed
  type : number
  default : "0"

• invert : inverts wheel zooming (default wheel up will zoom in our plot)
  type : string
  default : false

There are 2 steps in order to implement the wheel zoom:

• wrap your plot component in <PlotController>
• add the hook: useAxisWheelZoom({direction:'vertical', center:0, factor:1, invert:false})

This hook also implements the double click detection to reset the zoom to its original value.

useCrossHair

This hook adds crossHair to the plot . The hook may be customized with the following props:

• color : crossHair color
  type : string
  default : "black"

• lineStyle : adds style to crossHair line
  type : CSSProperties
  default : {}

• textStyle : adds style to crossHair text
  type : CSSProperties
  default : {}

• textTransform : trasforms crossHair text
  type : string
  default : ""

There are 3 steps in order to implement the crossHair:

• wrap your plot component in <PlotController>
• add the hook: const crossHair = useCrossHair();
• add the crossHair.annotations in order to draw CrossHair: <Annotations>{crossHair.annotations}</Annotations>

usePan

This hook adds an interactive pan to the plot to move in any direction while holding ALT. There are 2 steps in order to implement the pan:

• wrap your plot component in <PlotController>
• add the hook: usePan();

This hook also implements the double click detection to reset the zoom to its original value.