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 UserControl instance, but LiveCharts controls can be used inside any container.

sample image

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).

View model

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

namespace ViewModelsSamples.Lines.Zoom;

[ObservableObject]
public partial class ViewModel
{
    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

<UserControl x:Class="WPFSample.Lines.Zoom.View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:vms="clr-namespace:ViewModelsSamples.Lines.Zoom;assembly=ViewModelsSamples">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <TextBlock Text="Use the mouse wheel to zoom in/out, click hold and drag to move panning"/>

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

Articles you might also find useful: