Axis Pagination
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.
View model
using System;
using System.Collections.Generic;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.Axes.Paging;
public partial class ViewModel : ObservableObject
{
private readonly Random _random = new();
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 ISeries[]
{
new ColumnSeries<int>
{
Values = values
}
};
XAxes = new[] { new Axis() };
}
public ISeries[] Series { get; }
public Axis[] XAxes { get; }
[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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinSample.Axes.Paging.View"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
xmlns:vms="clr-namespace:ViewModelsSamples.Axes.Paging;assembly=ViewModelsSamples">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Orientation="Horizontal">
<Button Command="{Binding GoToPage1Command}" Text="Page 1"></Button>
<Button Command="{Binding GoToPage2Command}" Text="Page 2"></Button>
<Button Command="{Binding GoToPage3Command}" Text="Page 3"></Button>
<Button Command="{Binding SeeAllCommand}" Text="Clear"></Button>
</StackLayout>
<lvc:CartesianChart
Grid.Row="1"
Series="{Binding Series}"
XAxes="{Binding XAxes}"
ZoomMode="X">
</lvc:CartesianChart>
</Grid>
</ContentPage>
