Skip to main content

Zooming

Describes chart zooming interactivity features.

Introduction

JSCharting provides advanced zooming capabilities through user interactions and programmatically through the API.

To enable zooming, set the chart axisToZoom property to x or xy indicating the axes that are zoomable.

User interactions

With standard charts, zooming can be achieved by dragging a selection box across the chart area. The chart zooms to the selected range after the selection is made.

Zooming can be controlled using the mouse in the following ways:

Mouse only zooming

  • Alt-Scroll Wheel
    Zoom in and out.
  • Drag
    Initiates zoom selection or drags the chart.

Touch zooming

  • Pinch expand
    Zoom in.
  • Pinch contract
    Zoom out.
  • Two finger tap
    Zoom out.
  • Drag
    Initiates zoom selection or drags the chart.

Zooming UI Items

When the chart is zoomed in, the resetZoom toolbar item appears. This can be disabled with:

chartConfig.toolbar_items_resetZoom_visible = false;

The default position of the resetZoom button may overlap other uiItems. Therefore, using a setting like this can help correct this:

chartConfig.toolbar_items_resetZoom_position = "inside top left";

Zooming API

Series.zoomTo() & Point.zoomTo()

Series and Point objects both have a zoomTo() function and when called, it will scroll or zoom the item into view. This applies to mapping or standard charts when applicable.

Chart.zoom()

The chart.zoom() function can be used to adjust the zoom and to get the current zoom axis ranges.

Set the zoom level to 200%.

chart.zoom("initial");

Pan the chart by given [x,y] based on axis scale values.

chart.zoom(2);

Pans the chart by given [x,y] based on axis scale values

chart.zoom([5, 0]);

Set the zoom based on [cx, cy, level] center and zoom level.

chart.zoom([5, 15, 1.5]);

Sets the zoom based on given [x,y,width,height] bounding box in axis scale values.

chart.zoom([0, 0, 15, 15]);

More advanced zooming is also available and described in the Map Tutorial.