Basic Heat
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 System.Collections.ObjectModel;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
using SkiaSharp;
namespace ViewModelsSamples.Heat.Basic;
public class ViewModel
{
public ObservableCollection<ISeries> Series { get; set; } = new()
{
new HeatSeries<WeightedPoint>
{
HeatMap = new[]
{
new SKColor(255, 241, 118).AsLvcColor(), // the first element is the "coldest"
SKColors.DarkSlateGray.AsLvcColor(),
SKColors.Blue.AsLvcColor() // the last element is the "hottest"
},
Values = new ObservableCollection<WeightedPoint>
{
// Charles
new(0, 0, 150), // Jan
new(0, 1, 123), // Feb
new(0, 2, 310), // Mar
new(0, 3, 225), // Apr
new(0, 4, 473), // May
new(0, 5, 373), // Jun
// Richard
new(1, 0, 432), // Jan
new(1, 1, 312), // Feb
new(1, 2, 135), // Mar
new(1, 3, 78), // Apr
new(1, 4, 124), // May
new(1, 5, 423), // Jun
// Ana
new(2, 0, 543), // Jan
new(2, 1, 134), // Feb
new(2, 2, 524), // Mar
new(2, 3, 315), // Apr
new(2, 4, 145), // May
new(2, 5, 80), // Jun
// Mari
new(3, 0, 90), // Jan
new(3, 1, 123), // Feb
new(3, 2, 70), // Mar
new(3, 3, 123), // Apr
new(3, 4, 432), // May
new(3, 5, 142), // Jun
},
}
};
public ObservableCollection<Axis> XAxes { get; set; } = new()
{
new Axis
{
Labels = new[] { "Charles", "Richard", "Ana", "Mari" }
}
};
public ObservableCollection<Axis> YAxes { get; set; } = new()
{
new Axis
{
Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" }
}
};
}
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.Heat.Basic.View"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
xmlns:vms="clr-namespace:ViewModelsSamples.Heat.Basic;assembly=ViewModelsSamples">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<lvc:CartesianChart Series="{Binding Series}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}"></lvc:CartesianChart>
</Grid>
</ContentPage>
