Blazor Chart with Zooming and Panning Example.
This sample demonstrates the zooming and panning features of the chart, allowing users to explore data interactively.
The chart component supports four types of zooming, which can be configured using the EnableSelectionZooming, EnablePinchZooming, EnableMouseWheelZooming, and EnableDeferredZooming properties. This sample demonstrates the following zooming and panning behaviors:
- Selection Zooming : Click and drag the mouse over the chart area to enable selection zooming.
- Toolbar : Hover over the toolbar at the top-right corner of the chart area to switch between zooming and panning.
- Pinch Zooming : Pinch in or pinch out on the chart area to zoom in or out on touch-enabled devices.
- Panning : Touch and drag to pan the chart.
- Reset Zoom : Double-tap to reset the zoomed chart.
The chart also supports different zooming modes, which can be configured using the Mode property.
- XY - Zoom the chart with respect to both axes.
- X - Zoom the chart with respect to the horizontal axis only.
- Y - Zoom the chart with respect to the vertical axis only.
The ChartZoomToolbarPosition property is used to adjust the position of the zoom toolbar. In this example, the toolbar is moved 60 pixels upward from its default position.
The chart supports different scrollbar positions. By default, the scrollbar is placed next to the axis line, but you can customize its placement using the Position property of the ChartAxisScrollbarSettings component.
The available scrollbar positions are:
- PlaceNextToAxisLine – Place the scrollbar next to the axis line.
- Top – Place the scrollbar at the top of the chart (typically used for horizontal axes).
- Bottom – Place the scrollbar at the bottom of the chart (typically used for horizontal axes).
- Left – Place the scrollbar on the left side of the chart (typically used for vertical axes).
- Right – Place the scrollbar on the right side of the chart (typically used for vertical axes).
In this example, the scrollbar is placed at the bottom position.
Tooltip is enabled in this example. To see a tooltip in action, hover over or tap on the chart.
More information about the zooming and panning can be found in this documentation section.