Basic Bars
Hover over the image to see the chart animation
Notice this web site wraps every sample using the ContentPage class, but LiveCharts controls can be used inside any container,
this sample also follows a Model-View-* pattern.
View model
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.Bars.Basic;
public class ViewModel
{
public ISeries[] Series { get; set; }
= {
new ColumnSeries<double>
{
Name = "Mary",
Values = new double[] { 2, 5, 4 }
},
new ColumnSeries<double>
{
Name = "Ana",
Values = new double[] { 3, 1, 6 }
}
};
public Axis[] XAxes { get; set; }
= {
new Axis
{
Labels = new string[] { "Category 1", "Category 2", "Category 3" },
LabelsRotation = 15
}
};
}
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.Bars.Basic.View"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
xmlns:vms="clr-namespace:ViewModelsSamples.Bars.Basic;assembly=ViewModelsSamples">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:CartesianChart
Series="{Binding Series}"
XAxes="{Binding XAxes}"
LegendPosition="Right">
</lvc:CartesianChart>
</ContentPage>
