Users can zoom and pan charts using the mouse wheel or touch gestures. To introduce zoom and pan operations within your DevExpress-powered app, add a DxChartZoomAndPanSettings object and specify its ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties. To deactivate mouse wheel or touch gestures, set the AllowMouseWheel or AllowTouchGestures property to false.
Users can also pan charts along the argument axis using a scroll bar. To display a scroll bar, declare a DxChartScrollBarSettings object and activate its ArgumentAxisScrollBarVisible option. Use the ArgumentAxisScrollBarPosition property to specify scroll bar position.
When a chart contains a large number of points, you can aggregate data to optimize performance. Add a DxChartAggregationSettings object to chart markup, set its Enabled property to true, and specify the desired aggregation method via the Method property.
When you zoom or pan the chart, axis visual ranges change. The Chart component allows you to react to these changes using the VisualRangeChanged event. You can use the following APIs to modify visual ranges:
- DxChart.ResetVisualRange — Resets visual ranges for all axes to match a data range.
- DxChart.SetArgumentAxisVisualRange — Sets the visual range for the argument axis.
- DxChart.SetValueAxisVisualRange — Sets the visual range for a specific value axis.
- DxChartAxisRange.StartValue — Specifies axis start value.
- DxChartAxisRange.EndValue — Specifies axis end value.
In this demo, we leverage our built-in APIs and add accessibility-friendly zoom and pan operations (that conforms to the Dragging Movements criteria). Click toolbar items to zoom/pan the chart plane or reset axes visual range.
The DevExpress Blazor Chart component allows users to zoom a specific chart region (when the AllowDragToZoom option is active). To pan the chart when zoomed, drag the mouse while pressing the specified PanKey (Shift in this demo).
You can use the DxChartZoomAndPanDragBoxStyle object to customize drag (selection) box appearance settings, such as Color and Opacity.
When the AllowDragToZoom property is set to false, users can pan the chart with the mouse or use touch gestures without pressing any key.
When you zoom or pan the chart, axis visual ranges change. You can handle the VisualRangeChanged event to react to changes. Call the following methods to modify visual ranges:
- ResetVisualRange — Resets visual ranges for all axes to match a data range.
- SetArgumentAxisVisualRange — Sets the visual range for the argument axis.
- SetValueAxisVisualRange — Sets the visual range for a specific value axis.
In this demo, these methods implement accessibility-friendly zoom and pan operations (that conforms to the Dragging Movements criteria). Click toolbar items to zoom/pan the chart plane or reset axes visual range.