Basic Scatter
Hover over the image to see the chart animation
This web site builds the control from code behind but you could also grab it from the toolbox, this sample also uses a ViewModel to populate the properties of the control(s) in this sample.


View Model
using System.Collections.ObjectModel;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;
namespace ViewModelsSamples.Scatter.Basic;
public partial class ViewModel : ObservableObject
{
public ISeries[] Series { get; set; } =
{
new ScatterSeries<ObservablePoint>
{
Values = new ObservableCollection<ObservablePoint>
{
new(2.2, 5.4),
new(4.5, 2.5),
new(4.2, 7.4),
new(6.4, 9.9),
new(4.2, 9.2),
new(5.8, 3.5),
new(7.3, 5.8),
new(8.9, 3.9),
new(6.1, 4.6),
new(9.4, 7.7),
new(8.4, 8.5),
new(3.6, 9.6),
new(4.4, 6.3),
new(5.8, 4.8),
new(6.9, 3.4),
new(7.6, 1.8),
new(8.3, 8.3),
new(9.9, 5.2),
new(8.1, 4.7),
new(7.4, 3.9),
new(6.8, 2.3),
new(5.3, 7.1),
}
}
};
}
Code Behind
using System.Windows.Forms;
using LiveChartsCore.SkiaSharpView.WinForms;
using ViewModelsSamples.Scatter.Basic;
namespace WinFormsSample.Scatter.Basic;
public partial class View : UserControl
{
private readonly CartesianChart cartesianChart;
public View()
{
InitializeComponent();
Size = new System.Drawing.Size(50, 50);
var viewModel = new ViewModel();
cartesianChart = new CartesianChart
{
Series = viewModel.Series,
// out of livecharts properties...
Location = new System.Drawing.Point(0, 0),
Size = new System.Drawing.Size(50, 50),
Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom
};
Controls.Add(cartesianChart);
}
}