Zooming And Panning

This web site builds the control from code behind but you could also grab it from the toolbox, this sample also uses a ViewModel to populate the properties of the control(s) in this sample.

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;

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; }
}

Form code behind

using System.Windows.Forms;
using LiveChartsCore.SkiaSharpView.WinForms;
using ViewModelsSamples.Lines.Zoom;

namespace WinFormsSample.Lines.Zoom;

public partial class View : UserControl
{
    private readonly CartesianChart cartesianChart;

    public View()
    {
        InitializeComponent();
        Size = new System.Drawing.Size(50, 50);

        var viewModel = new ViewModel();

        cartesianChart = new CartesianChart
        {
            Series = viewModel.SeriesCollection,
            TooltipPosition = LiveChartsCore.Measure.TooltipPosition.Hidden,
            ZoomMode = LiveChartsCore.Measure.ZoomAndPanMode.X | LiveChartsCore.Measure.ZoomAndPanMode.InvertPanningPointerTrigger, // mark

            // out of livecharts properties...
            Location = new System.Drawing.Point(0, 0),
            Size = new System.Drawing.Size(50, 50),
            Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom
        };

        Controls.Add(cartesianChart);
    }
}

Articles you might also find useful:

Cartesian chart control
Line series properties