Skip to main content

Functional

These hooks allow you to do specific precoded functionalities.

Currently we support following functional hooks:

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.

Draw a rectangle

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.

Draw a rectangle

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

Draw a rectangle
Draw a rectangle

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.

Scroll inside the plot

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>
Move the mouse inside

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.

Press ALT, Grab and drag