Zooming And Panning

The [ObservableObject], [ObservableProperty] and [RelayCommand] attributes come from the CommunityToolkit.Mvvm package, you can read more about it here.

sample image

Zooming and panning is disabled by default, you can enable it by setting the ZoomMode property, this property is of type ZoomAndPanMode and the options are:

The ZoomAndPanMode type is a flag enum, so you can combine the options, for example, if you want to enable zooming on the X axis and panning on the Y axis you can set the ZoomMode property to ZoomAndPanMode.ZoomX | ZoomAndPanMode.PanY.

There is also the InvertPanningPointerTrigger flag, when this flag is present the panning will be triggered using the right click on desktop devices and the touch-and-hold gesture on touch devices, the zoom by section feature will be triggered to the left click on desktop devices and the touch-and-hold gesture on touch devices.

You can learn more about zooming an panning here.

In touch devices, pinch the screen in/out to zoom, hold tap and drag to move the view (panning).

View model

using System;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;

namespace ViewModelsSamples.Lines.Zoom;

public partial class ViewModel : ObservableObject
{
    public ViewModel()
    {
        var values = new int[100];
        var r = new Random();
        var t = 0;

        for (var i = 0; i < 100; i++)
        {
            t += r.Next(-90, 100);
            values[i] = t;
        }

        SeriesCollection = new ISeries[] { new LineSeries<int> { Values = values } };
    }

    public ISeries[] SeriesCollection { get; set; }
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinSample.Lines.Zoom.View"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
             xmlns:vms="clr-namespace:ViewModelsSamples.Lines.Zoom;assembly=ViewModelsSamples">
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
    <Grid>
        <lvc:CartesianChart
            Series="{Binding SeriesCollection}"
            ZoomMode="X">
        </lvc:CartesianChart>
    </Grid>
</ContentPage>

Articles you might also find useful:

Cartesian chart control
Line series properties