Axis Pagination

This sample uses C# 12 features, it also uses features from the CommunityToolkit.Mvvm package, you can learn more about it here.

sample image

View model

using System;
using System.Collections.Generic;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore;
using LiveChartsCore.Kernel.Sketches;
using LiveChartsCore.SkiaSharpView;

namespace ViewModelsSamples.Axes.Paging;

public partial class ViewModel
{
    private readonly Random _random = new();

    public ISeries[] Series { get; }

    public ICartesianAxis[] XAxes { get; }

    public ViewModel()
    {
        var trend = 100;
        var values = new List<int>();

        for (var i = 0; i < 100; i++)
        {
            trend += _random.Next(-30, 50);
            values.Add(trend);
        }

        Series = [new ColumnSeries<int>(values)];
        XAxes = [new Axis()];
    }

    [RelayCommand]
    public void GoToPage1()
    {
        var axis = XAxes[0];
        axis.MinLimit = -0.5;
        axis.MaxLimit = 10.5;
    }

    [RelayCommand]
    public void GoToPage2()
    {
        var axis = XAxes[0];
        axis.MinLimit = 9.5;
        axis.MaxLimit = 20.5;
    }

    [RelayCommand]
    public void GoToPage3()
    {
        var axis = XAxes[0];
        axis.MinLimit = 19.5;
        axis.MaxLimit = 30.5;
    }

    [RelayCommand]
    public void SeeAll()
    {
        var axis = XAxes[0];
        axis.MinLimit = null;
        axis.MaxLimit = null;
    }
}

XAML

<UserControl x:Class="AvaloniaSample.Axes.Paging.View"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.Axes.Paging">
  <UserControl.DataContext>
    <vms:ViewModel/>
  </UserControl.DataContext>
  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button Command="{Binding GoToPage1Command}">Page 1</Button>
        <Button Command="{Binding GoToPage2Command}">Page 2</Button>
        <Button Command="{Binding GoToPage3Command}">Page 3</Button>
        <Button Command="{Binding SeeAllCommand}">Clear</Button>
    </StackPanel>
    <lvc:CartesianChart
        Grid.Row="1"
        Series="{Binding Series}"
        XAxes="{Binding XAxes}"
        ZoomMode="X">
    </lvc:CartesianChart>
  </Grid>
</UserControl>

Articles you might also find useful: