ZoomCharts Documentation

Version: 1.21.8 (2025-09-01)
Switch to Version 2.0 (BETA)

NetChart.settings.interaction.zooming

This section is defined by the type NetChartSettingsInteractionZooming.

Zoom in or out by swiping up or down with mouse scroll pad or by using the Zoom-out feature at the top left.

Properties

autoZoomAfterClick: boolean
Default value: false

Whether to auto zoom every time user clicks on the chart.

autoZoomCenterOffsetTolerance: number
Default value: 1

Determines how much the center of the nodes can move before auto zoom updates.

The default value is 1.0, meaning it must move by an amount equal to the padding before the auto zoom updates. Lower values, down to 0 will update with smaller moves, while larger values will require more significant movement before auto zoom updates.

autoZoomExcessivePaddingTolerance: number
Default value: 1

Determines how far nodes are allowed to move inwards, creating more * than the optimal amount of padding, before auto zoom updates.

If auto zoom always updates when there is more than the optimal amount of padding, then this can create an undesirable "trembling" as auto zoom might constantly update if e.g. a boundary node is moving inwards.

The default value is 1.0, meaning it must move inwards by an amount equal to the padding before the auto zoom updates. Lower values, down to 0 will update with smaller moves inwards, while larger values will require more significant inward movement before auto zoom updates.

The threshold is calculated as: 1.0 + (autoZoomExcessivePaddingTolerance * padding)

autoZoomExtent: [number, number]
Default value: [ null, 1 ]
Version 1.12.0: the min value is no longer ignored when "Fit to screen" is active.
Version 1.13.0: the default of the minimum value is changed to null.

Zoom value limits for automatic zooming (for example, "Fit to screen"). Contains array of [min, max] values.

If the minimum (the first value) is specified as null, the chart will not enforce it, instead it will be adjusted as needed if the network grows very large. Note that specifying null as the minimum also overrides the minimum for the zoomExtent value.

autoZoomPositionElasticity: number
Default value: 2.5e-7

The acceleration of scene movement, when trying to contain all nodes within the view, when autozoom is enabled. Increasing the value decreases latency, and makes the animation more responsive. Decreasing the value makes the animation more fluid

autoZoomSize: number
Default value: 0.9
Version 1.12.0: default changed from 0.98 to 0.9.

Controls the percentage of how much of the chart width/height the nodes can move around without triggering automatic zoom adjustment. A value of 0.9 means that the target is to leave 10% padding on all sides of the chart. However once the target is reached, if the nodes move within these 10% on either side, the zoom adjustment is not performed.

Note that this is a percent of the data size, not the screen size. For example, if the value is 0.2, then by the logic above this means the target is to leave 80% padding on all sides. This does not mean that 80% of the chart will be white space and all of the data will be stuffed in the middle 20%. Rather, it means that the screen will be fit as if the data was 80% wider and taller than it really is. For instance, if the data would normally fit in a 1000x1000 box, then the screen would fit to a 1700x1700 box with the data in the middle 1000x1000.

autoZoomThreshold: number
Default value: 0.01

If the target zoom level differs from the current zoom level by more than autoZoomThreshold percent, then an actual zoom is performed. Otherwise the current zoom level is considered good enough. Useful to increase if many small zoom changes are causing small, unwanted shifts or vibrations in the zoom level. Useful to decrease if the zoom doesn't seem to be updating on changes that should change the zoom level.

doubleClickZoom: number
Default value: 1.5

A double-click on empty space will trigger zoom in by this value. Set to null or false to disable double click zooming.

fingers: boolean
Default value: true

Whether to zoom by two finger pinch.

fingersOverrideDrag: boolean
Default value: false

Whether a two-finger zoom takes precedence over an existing node drag

initialAutoZoom: "overview" | boolean
Default value: "overview"

Auto zoom mode on chart initialization.

Valid values:

  • overview - show whole network
  • true - use basic auto zoom
  • false - no auto zoom.
sensitivity: number
Default value: 1

Sensitivity of wheel zoom.

shouldKeepGraphOnScreen: boolean
Default value: true
wheel: boolean
Default value: true

Whether to zoom by mouse wheel.

zoomExtent: [number, number]
Default value: [ 0.5, 4 ]
Version 1.12.0: the minimum value is now always enforced even if the chart does not fit with it applied.
Version 1.13.0: if autoZoomExtent minimum is null and the actual auto zoom level is less than this minimum, the auto zoom level is used instead.

Zoom value limits while for manual zooming. Contains array of [min, max] values.

Note that if the minimum for autoZoomExtent is null (the default) then it can override the minimum in this value if the auto zoom level is smaller.

zoomInOnDoubleClick: boolean
Default value: true

Enable/Disable zoom in on double click.

zoomOnSliderClick: boolean
Default value: true

Whether to update the zoom level immediately upon clicking the slider, or to only zoom when the slider is dragged.

X