Blazor Chart with Zooming and Panning Example.
This sample demonstrates the zooming and panning features of the chart, enabling interactive exploration of data with detailed insights.
The chart component supports four types of zooming, configurable using the following properties:
- EnableSelectionZooming - Selection-based zoom interaction
- EnablePinchZooming - Touch gesture pinch zoom
- EnableMouseWheelZooming - Mouse wheel zoom
- EnableDeferredZooming - Deferred zoom processing
This sample demonstrates the following zooming and panning behaviors:
- Selection Zooming - Click and drag to enable selection zooming over the desired chart area
- Toolbar - Hover over the toolbar at the top-right corner to switch between zooming and panning modes
- Pinch Zooming - Pinch in or out on touch-enabled devices to zoom the chart
- Panning - Touch and drag on touch-enabled devices to pan the chart
- Reset Zoom - Double-tap to reset the zoomed chart to original view
Configure different zooming modes using the Mode property with the following options:
- XY - Zoom with respect to both axes
- X - Zoom with respect to horizontal axis only
- Y - Zoom with respect to vertical axis only
The ChartZoomToolbarPosition property adjusts the toolbar position. In this example, the toolbar is positioned 60 pixels upward from its default location.
The chart supports different scrollbar positions via the Position property of the ChartAxisScrollbarSettings component. Available scrollbar positions include:
- PlaceNextToAxisLine – Positions scrollbar next to the axis line
- Top – Positions scrollbar at the top (typically for horizontal axes)
- Bottom – Positions scrollbar at the bottom (typically for horizontal axes)
- Left – Positions scrollbar on the left side (typically for vertical axes)
- Right – Positions scrollbar on the right side (typically for vertical axes)
In this example, the scrollbar is positioned at the bottom location.
Tooltip is enabled in this example. To see tooltip details, hover over or tap on the chart.
More information about zooming and panning can be found in this documentation section.