Zooming And Panning
The [ObservableObject], [ObservableProperty] and [ICommand] attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
This web site wraps every sample using a ContentPage instance, but LiveCharts controls can be used inside any container.
Zooming and panning is disabled by default, you can enable it by setting the ZoomMode property, this property is of type
LiveChartsCore.Measure.ZoomAndPanMode (enum) and the options are X, Y, Both and None (default), 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="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart
Series="{Binding SeriesCollection}"
TooltipPosition="Hidden"
ZoomMode="X"> <!-- mark -->
</lvc:CartesianChart>
</Grid>
</ContentPage.Content>
</ContentPage>
