Zooming And Panning

This sample uses C# 13 preview features such as partial properties, it also uses features from the CommunityToolkit.Mvvm package, you can learn 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, this type is a flag enum it means that you can combine the options as you need, you can learn more about zooming and panning options here.

Use the mouse wheel to zoom in/out, hold click and drag to pan.

XAML

<UserControl
    x:Class="WinUISample.Lines.Zoom.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.Lines.Zoom"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>

    <lvc:CartesianChart
        ZoomMode="X"><!-- mark -->
        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <lvc:XamlLineSeries Values="{Binding Values}"/>
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>
</UserControl>

Options

You can enable zooming and panning 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 Both axes and disable "Fit top Bounds" you could set the ZoomMode property to:

<lvc:CartesianChart ZoomMode="Both,NoFit">
</lvc:CartesianChart>
sample image

Bouncing distance

While "Fit to bounds" is enabled, (enabled by default, to disable see NoFit in the options section), when the user zooms or pans, the chart will allow to scroll the data 25% beyond the limits, this is controlled by the Axis BouncingDistance property, for example setting Axis.BouncingDistance to 0 will disable scrolling beyond data limits.

Min zoom level

The axis MinZoomDelta property is useful to control how deep the user can zoom, this property defines the minimum difference between the max and min visible limits of the axis, default is null and null means that the library will calculate this value based on the current data.

Clearing zooming and panning

Setting MinLimit and MaxLimit properties to null or double.NaN will clear the current limits and fit the the data to the viewport.

// where myChart is a reference to the chart in the UI
 foreach (var x in myChart.XAxes)
 {
     x.MinLimit = null;
     x.MaxLimit = null;
 }

 foreach (var y in myChart.YAxes)
 {
     y.MinLimit = null;
     y.MaxLimit = null;
 }

Zoom by Section

You can also zoom by section, this is a feature that allows you to select an area in the chart and zoom in to that area, when zooming is enabled, this feature is also enabled by default, you can also customize the trigger of this function, you can find more info here.

sample image

Right click on the chart, hold and drag to select an area in the chart.

Listen for zooming or panning user changes

You can subscribe to the axis PropertyChanged event and read the MinLimit and MaxLimit properties, both are updated as the user zooms or pans.

// where myChart is a reference to the chart in the UI
myChart.XAxes.First().PropertyChanged += OnPropertyChanged;

// ....

private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    var axis = (ICartesianAxis)sender;

    if (e.PropertyName == nameof(Axis.MinLimit))
    {
        Trace.WriteLine($"{axis.Orientation} Min Limit {axis.MinLimit}");
    }

    if (e.PropertyName == nameof(Axis.MaxLimit))
    {
        Trace.WriteLine($"{axis.Orientation} Max Limit {axis.MaxLimit}");
    }
}

Axis bounds control

You can listen to the axis range changes and override the limits to your needs:

// where myChart is a reference to the chart in the UI
myChart.XAxes.First().PropertyChanged += OnPropertyChanged;

// ....

private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    var axis = (ICartesianAxis)sender;

    var max = axis.MaxLimit;
    var min = axis.MinLimit;

    if (max is null || min is null)
        return;

    // forces the axis range to 0-100 always

    if (min < 0)
        min = 0;

    if (max > 100)
        max = 100;

    axis.SetLimits(min.Value, max.Value);
}

Manually fire zooming or panning

You can manually trigger the functions in the chart that trigger zooming or panning, for example you could set the ZoomMode property to None, this will prevent LiveCharts to fire zooming or panning, and then we could fire these features when we want, for example zooming on double tap or panning on mouse move.

// where myChart is a reference to the chart in the UI
var engine = (CartesianChartEngine)myChart.CoreChart;

// zooms in in X using the 100,100 as the center of the zoom
engine.Zoom(ZoomAndPanMode.X, new(100, 100), ZoomDirection.ZoomIn);

// pans the chart 10 pixels to the right and 10 pixels down on both axes
engine.Pan(ZoomAndPanMode.Both, new(10, 10));

// starts the zooming section feature at the point (100, 100)
// for example start the section on double tap.
engine.StartZoomingSection(ZoomAndPanMode.Both, new(100, 100));

// grows the zooming section by 10 pixels on both axes, it just grows the
// drawn rectangle in the UI, it does not apply zoom yet.
// for example when the pointer moves after the previous double tap.
engine.GrowZoomingSection(ZoomAndPanMode.Both, new(10, 10));

// ends the zooming section feature at the point (110, 110)
// for example on double tap again.
engine.EndZoomingSection(ZoomAndPanMode.Both, new(110, 110));

Articles you might also find useful:

Cartesian chart control
Line series properties