React Chart Navigation

    The Ignite UI for React charts allows for interactive panning and zooming via the mouse, keyboard and touch.

    React Chart Navigation Example

    The following example shows all of the available panning and zooming options that are available. You can interact with the example by using the buttons, or select your desired options using the dropdowns or checkboxes.

    Like this sample? Get access to our complete React toolkit and start building your own apps in minutes. Download it for free.

    Chart Navigation with User Interactions

    Zooming is on by default on the chart. In order to disable navigation in the UI, you need to set either the isHorizontalZoomEnabled and/or the isVerticalZoomEnabled properties of the chart to false, depending on the direction that you wish to disable zooming.

    It is also possible to zoom or pan simply by clicking the mouse or using touch. The defaultInteraction property of the data chart determines what happens on mouse click or touch events. This property defaults to DragZoom and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This defaultInteraction property can also be set to either DragPan to allow panning or None to prevent these operations.

    Chart Navigation with Touch, Mouse and Keyboard

    Navigation in the React data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default:

    • Panning: Using 🡐 🡒 🡑 🡓 arrow keys on the keyboard or holding the Shift key, clicking and dragging with the mouse or pressing and moving your finger via touch.
    • Zoom In: Using the Page Up key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
    • Zoom Out: Using the Page Down key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
    • Fit to Chart Plot Area: Using the Home key on the keyboard. There is no mouse or touch operation for this.
    • Area Zoom: Click and drag the mouse within the plot area with the defaultInteraction property set to its default - DragZoom.

    The zoom and pan operations can also be enabled by using modifier keys by setting the dragModifier and panModifier properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:

    Modifier Value Corresponding Key
    Shift Shift
    Control Ctrl
    Windows Win
    Apple Apple
    None no keys

    Chart Navigation with Scrollbars

    The chart can be scrolled by enabling the verticalViewScrollbarMode and horizontalViewScrollbarMode properties.

    These can be configured to the following options

    • Persistent - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out.
    • Fading - The scrollbars disappear after use and reappear when the mouse is near their location.
    • FadeToLine - The scrollbars are reduced to a thinner line when zooming is not in use.
    • None - Default, no scrollbars are shown.

    The following example demonstrates enabling scrollbars.

    Chart Navigation through Code

    [!Note] Code navigation of the chart can only be used for the IgrDataChart control.

    The React data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:

    • windowPositionHorizontal: A numeric value describing the X portion of the content view rectangle displayed by the data chart.
    • windowPositionVertical: A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
    • windowRect: A Rect object representing a rectangle that represents the portion of the chart that is currently in view. For example, a windowRect of "0, 0, 1, 1" would be the entirety of the data chart.
    • windowScaleHorizontal: A numeric value describing the width portion of the content view rectangle displayed by the data chart.
    • windowScaleVertical: A numeric value describing the height portion of the content view rectangle displayed by the data chart.

    Additional Resources

    You can find more information about related chart features in these topics:

    API References

    The following is a list of API members mentioned in the above sections: