JavaScript/jQuery Chart - Zooming and Panning
Zooming and panning is an efficient way to navigate a chart that contains many series points. A user can zoom and pan the chart using mouse commands or touch gestures, the scrollbar, or the RangeSelector UI component. Each of these cases are detailed in this topic.
Using Mouse Commands or Touch Gestures
Users can zoom the chart by rotating the mouse wheel and pan it using the drag gesture. On touch-enabled devices, users can zoom the chart using the spread and pinch gestures and pan the chart using the drag gesture, too.
Zooming and panning are configured in the zoomAndPan object. You can enable them separately for the argument and value axes by specifying the argumentAxis and valueAxis properties:
- $(function() {
- $("#chartContainer").dxChart({
- // ...
- zoomAndPan: {
- argumentAxis: "both", // or "zoom" | "pan" | "none"
- valueAxis: "both" // or "zoom" | "pan" | "none"
- }
- });
- });
Users can zoom the chart using the drag gesture (area selection) if you enable the dragToZoom property. To pan in this case, users should perform the drag gesture while pressing panKey. Zooming and panning should be enabled.
- $(function() {
- $("#chartContainer").dxChart({
- // ...
- zoomAndPan: {
- dragToZoom: true,
- panKey: "ctrl",
- argumentAxis: "both",
- valueAxis: "both"
- }
- });
- });
If you need to disable the mouse wheel or touch support, set the allowMouseWheel or allowTouchGestures property to false. In the following example, zooming and panning are enabled only on devices that use the mouse.
- $(function() {
- $("#chartContainer").dxChart({
- // ...
- zoomAndPan: {
- argumentAxis: "both",
- valueAxis: "both",
- allowTouchGestures: false
- }
- });
- });
Users cannot zoom or scroll the chart out of the whole range. Refer to the Visual and Whole Ranges article for more information.
See Also
Using the Scroll Bar
The scrollbar is a chart element used for panning.
You can configure the scrollbar using the scrollBar object. To display the scrollbar, set this object's visible property to true after enabling zooming and panning.
- $(function() {
- $("#chartContainer").dxChart({
- // ...
- zoomAndPan: {
- argumentAxis: "both",
- valueAxis: "both"
- },
- scrollBar: {
- visible: true,
- //...
- }
- });
- });
Users cannot zoom or scroll the chart out of the whole range. Refer to the Visual and Whole Ranges article for more information.
See Also
Using the RangeSelector Component
The Chart can be zoomed and panned using the RangeSelector UI component. The following code shows how to bind these UI components. Note that the Chart and RangeSelector have a common data source and may have the same series configuration if the RangeSelector should display the Chart in the background.
- $(function() {
- // Common data source for both UI components
- var data = [ ... ];
- // Common series configuration for both UI components
- var seriesConfiguration = [ ... ];
- var chart = $("#chartContainer").dxChart({
- dataSource: data,
- series: seriesConfiguration
- }).dxChart("instance");
- $("#rangeSelectorContainer").dxRangeSelector({
- dataSource: data,
- // Displays the Chart in the background of the RangeSelector
- chart: {
- series: seriesConfiguration
- },
- onValueChanged: function (e) {
- // Zooms the Chart
- chart.getArgumentAxis().visualRange(e.value);
- },
- // Makes zooming and panning smoother
- behavior: { callValueChanged: "onMoving" }
- });
- });
When your data source is updated in real time, the behavior of both the Chart's visual range and the RangeSelector's selected range depends on the selectedRangeUpdateMode property specified for the RangeSelector:
- $(function() {
- // ...
- // The Chart is configured here
- $("#rangeSelectorContainer").dxRangeSelector({
- // ...
- selectedRangeUpdateMode: "keep" // the ranges remain unchanged
- });
- });
If you need to fix the zoom window and allow users to only move it along the scale, set the scale object's minRange and maxRange properties to a single value defining the zoom window's length. Make sure you specify the initial zoom factor using the value property.
- $(function() {
- // ...
- // The Chart is configured here
- $("#rangeSelectorContainer").dxRangeSelector({
- // ...
- scale: {
- minRange: 10,
- maxRange: 10
- },
- value: [0, 10]
- });
- });
See Also
Set the Initial Zoom
To zoom a standalone Chart initially, specify the axis' visualRange.
- $(function() {
- $("#chartContainer").dxChart({
- argumentAxis: {
- visualRange: [0, 10]
- }
- });
- });
For more information about visual and whole ranges, refer to the following article: Visual and Whole Ranges.
If the Chart is bound to the RangeSelector, specify the Chart's initial zoom factor by setting the RangeSelector's value property.
- $(function() {
- // ...
- // The Chart is configured here
- $("#rangeSelectorContainer").dxRangeSelector({
- // ...
- value: [0, 10]
- });
- });
Stop Zooming or Panning
The Chart provides the onZoomEnd event handler that can be used to stop zooming or panning when a specific condition is met.
For example, you can disallow users to zoom in further if the visual range's length is less than 1:
- $(function() {
- $("#chartContainer").dxChart({
- // ...
- onZoomEnd: function(e) {
- e.cancel = (e.range.endValue - e.range.startValue) < 1;
- },
- zoomAndPan: {
- argumentAxis: "both",
- valueAxis: "both"
- }
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.