Zoom and Pan


Users can zoom and pan the chart with the mouse wheel or touch gestures. To enable zoom and pan, add a DxChartZoomAndPanSettings object and specify its ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties. To disable the mouse wheel or touch gestures, use the AllowMouseWheel or AllowTouchGestures properties.

You can also add a scroll bar that allows users to pan the chart along the argument axis. To do this, add a DxChartScrollBarSettings object and set its ArgumentAxisScrollBarVisible property to true. Use the ArgumentAxisScrollBarPosition property to specify the scroll bar's position.

When the chart contains the large number of points, you can aggregate data to optimize performance. Add a DxChartAggregationSettings object to the markup, set its Enabled property to true, and specify an aggregation method in the Method property.

Zoom Selected Area

Life Expectancy vs. Birth Rate

DevExpress Blazor Chart component allows users to zoom a specific chart region. To enable this functionality, 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.