Zooming And Panning
The [ObservableObject], [ObservableProperty] and [RelayCommand] attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
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 Windows, use the mouse wheel to zoom in/out, hold click and drag to move the view (panning).
On MacOS slide vertically a finger(s) on a magic mouse to zoom in/out, hold click and drag to move the view (panning).
On Android or iOS, pinch the screen in/out to zoom, hold tap and drag to move the view (panning).
On the Browser, use the mouse wheel to zoom in/out, hold click and drag to move the view (panning) (no touch devices yet).
XAML
<UserControl
x:Class="UnoWinUISample.Lines.Zoom.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
xmlns:vms="using:ViewModelsSamples.Lines.Zoom"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<lvc:CartesianChart
Series="{Binding SeriesCollection}"
ZoomMode="X"><!-- mark -->
</lvc:CartesianChart>
</UserControl>
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 Windows, right click on the chart, hold and drag to select an area on the chart.
On MacOS, Android or iOS double click/tap the chart, hold the last click/tap and drag to select an area.
On the Browser, right click on the chart, hold and drag to select an area on the chart (no touch devices yet).
