Customize Visuals
Hover over the image to see the chart animation
The [ObservableObject], [ObservableProperty] and [RelayCommand] attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
View Model
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.ConditionalDraw;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
namespace ViewModelsSamples.General.MapPoints;
public partial class ViewModel : ObservableObject
{
public ViewModel()
{
var paints = new SolidColorPaint[]
{
new(SKColors.Red),
new(SKColors.Green),
new(SKColors.Blue),
new(SKColors.Yellow)
};
var series = new ColumnSeries<int>
{
Values = new[] { 2, 5, 4, 6, 8, 3, 2, 4, 6 },
DataLabelsPaint = new SolidColorPaint(new SKColor(30, 30, 30)),
DataLabelsPosition = DataLabelsPosition.Top
}
.OnPointMeasured(point =>
{
// this method is called for each point in the series
// we can customize the visual here
if (point.Visual is null) return;
// get a paint from the array
var paint = paints[point.Index % paints.Length];
// set the paint to the visual
point.Visual.Fill = paint;
});
Series = new ISeries[] { series };
}
public ISeries[] Series { get; set; }
}
XAML
<UserControl x:Class="WPFSample.General.MapPoints.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
xmlns:vms="clr-namespace:ViewModelsSamples.General.MapPoints;assembly=ViewModelsSamples">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<lvc:CartesianChart Grid.Row="1" Series="{Binding Series}" />
</UserControl>
