Zooming And Panning
Zooming and panning is disabled by default, you can enable it by setting the ZoomMode
property, this property is of type
ZoomAndPanMode, this type is a flag enum
it means that you can combine the options as you need, you can learn more about zoomming and panning
here.
On the Browser, use the mouse wheel to zoom in/out, hold click and drag to move the view (panning) (no touch devices yet).
HTML
@page "/Lines/Zoom"
@using LiveChartsCore.SkiaSharpView.Blazor
@using ViewModelsSamples.Lines.Zoom
<CartesianChart
Series="ViewModel.SeriesCollection"
ZoomMode="LiveChartsCore.Measure.ZoomAndPanMode.X"> <!-- mark -->
</CartesianChart>
@code {
public ViewModel ViewModel { get; set; } = new();
}
Zoom by selection
You can also zoom by selection, this is a feature that allows you to select an area in the chart and zoom in to that area, when zooming is enabled, this feature is also enabled by default, you can also customize the trigger of this function, you can find more info here.
On the Browser, right click on the chart, hold and drag to select an area on the chart (no touch devices yet).