Users can zoom and pan charts using the mouse wheel or touch gestures. To allow zoom and pan operations, 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 use the Method property to specify the desired aggregation method.
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 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, click the Reset Zoom button to set the argument axis visual range to the initial range (specified via DxChartAxisRange.StartValue and DxChartAxisRange.EndValue properties).
DevExpress Blazor Chart component allows users to zoom a specific chart region. To activate this capability, set the AllowDragToZoom property to true. To pan the chart when zoomed, drag the mouse while pressing the specified PanKey. In this demo, press Shift to pan.
You can also use the DxChartZoomAndPanDragBoxStyle object to customize appearance of the drag (selection) box. Customizable settings include 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. The DevExpress Blazor Chart component allows you to react to those changes using the VisualRangeChanged event. You can use 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, click the Reset Zoom button to reset visual ranges for both argument and value axes.