Sharing An Axis
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 CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.Axes.Shared;
[ObservableObject]
public partial class ViewModel
{
public ViewModel()
{
var values1 = new int[50];
var values2 = new int[50];
var r = new Random();
var t = 0;
var t2 = 0;
for (var i = 0; i < 50; i++)
{
t += r.Next(-90, 100);
values1[i] = t;
t2 += r.Next(-90, 100);
values2[i] = t2;
}
SeriesCollection1 = new ISeries[] { new LineSeries<int> { Values = values1 } };
SeriesCollection2 = new ISeries[] { new ColumnSeries<int> { Values = values2 } };
// sharing the same instance for both charts will keep the zooming and panning synced // mark
SharedXAxis = new Axis[] { new Axis() };
}
public ISeries[] SeriesCollection1 { get; set; }
public ISeries[] SeriesCollection2 { get; set; }
public Axis[] SharedXAxis { get; set; }
}
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.Shared.View"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
xmlns:vms="clr-namespace:ViewModelsSamples.Axes.Shared;assembly=ViewModelsSamples">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
Notice we are binding the XAxes to the same instance, this way we are sharing both charts zooming and panning
no matter in which chart you zoom, the other chart will share the view.
-->
<lvc:CartesianChart Grid.Row="0" Series="{Binding SeriesCollection1}" XAxes="{Binding SharedXAxis}" ZoomMode="X"></lvc:CartesianChart>
<lvc:CartesianChart Grid.Row="1" Series="{Binding SeriesCollection2}" XAxes="{Binding SharedXAxis}" ZoomMode="X"></lvc:CartesianChart>
</Grid>
</ContentPage>
