Zooming And Panning

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

sample image

Currently zooming is not working on desktop devices due a MAUI limitation, please show your interest on this feature to the MAUI team at https://github.com/dotnet/maui/issues/16130.

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 desktop, use the mouse wheel to zoom in/out, hold click and drag to move the view (panning).

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 x:Class="MauiSample.Lines.Zoom.View"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             xmlns:vms="clr-namespace:ViewModelsSamples.Lines.Zoom;assembly=ViewModelsSamples"
             >
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
	<ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Label
                Text="For touch devices pinch to zoom in/out, drag the chart for panning. On desktop devices it is not working because Maui does not support mouse wheel events yet: https://github.com/dotnet/maui/issues/16130"/>

            <lvc:CartesianChart
                Grid.Row="1"
                Series="{Binding SeriesCollection}"
                ZoomMode="X"> <!-- mark -->
            </lvc:CartesianChart>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Articles you might also find useful:

Cartesian chart control
Line series properties