Specify Both X And Y
When you need to specify both, X and Y coordinates, you can use the
ObservablePoint class,
in other examples in this repository you will notice that the library can also plot primitive types such as
int or double, the library (usually) uses the index of the element in the array as the X coordinate
and the value as the Y coordinate, so even we are passing an array of primitives, the library is mapping
that object to and (X, Y) point, the library can build charts from any object, but we much teach LiveCharts
how to handle that object, if you want to learn more, please read the
Mappers article.
View Model
using LiveChartsCore.Defaults;
namespace ViewModelsSamples.Lines.XY;
public class ViewModel
{
// use the ObservablePoint class to set both, X and Y coordinates,
// alternatively you can also use your own object and implement IChartEntity
// or map the object to a coordinate in the chart, for more info:
// https://livecharts.dev/docs/{{ platform }}/{{ version }}/Overview.Mappers
public ObservablePoint[] Values { get; set; } = [
new(0, 4),
new(1, 3),
new(3, 8),
new(18, 6),
new(20, 12)
];
}
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.Lines.XY.View"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
xmlns:vms="clr-namespace:ViewModelsSamples.Lines.XY;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlLineSeries Values="{Binding Values}"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</ContentPage>
