Zooming

Chart Tutorials  

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-Scrollwheel
    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 = "ca:topLeft";

🔗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.