Line Geometries

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.

sample image

View model

using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;

namespace ViewModelsSamples.Lines.Custom;

[ObservableObject]
public partial class ViewModel
{
    public ISeries[] Series { get; set; } =
    {
        new LineSeries<double>
        {
            Values = new double[] { 3, 1, 4, 3, 2, -5, -2 },
            GeometrySize = 10,
            Fill = null
        },

        // use the second argument type to specify the geometry to draw for every point
        // there are already many predefined geometries in the
        // LiveChartsCore.SkiaSharpView.Drawing.Geometries namespace
        new LineSeries<double, LiveChartsCore.SkiaSharpView.Drawing.Geometries.RectangleGeometry>
        {
            Values = new double[] { 3, 3, -3, -2, -4, -3, -1 },
            Fill = null
        },

        // you can also define your own SVG geometry
        new LineSeries<double, MyGeometry>
        {
            Values = new double[] { -2, 2, 1, 3, -1, 4, 3 },

            Stroke = new SolidColorPaint(SKColors.DarkOliveGreen, 3),
            Fill = null,
            GeometryStroke = null,
            GeometryFill = new SolidColorPaint(SKColors.DarkOliveGreen),
            GeometrySize = 40
        }
    };
}

MyGeometry.cs

using LiveChartsCore.SkiaSharpView.Drawing;
using SkiaSharp;

namespace ViewModelsSamples.Lines.Custom;

public class MyGeometry : LiveChartsCore.SkiaSharpView.Drawing.Geometries.SVGPathGeometry
{
    // the static field is important to prevent the svg path is parsed multiple times // mark
    // Icon from Google Material Icons font.
    // https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Atask_alt%3A
    public static SKPath svgPath = SKPath.ParseSvgPathData(
        "M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12 " +
        "c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12 " +
        "c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z");

    public MyGeometry()
        : base(svgPath)
    { }

    public override void OnDraw(SkiaSharpDrawingContext context, SKPaint paint)
    {
        // lets also draw a white circle as background before the svg path is drawn
        // this will just make things look better

        using (var backgroundPaint = new SKPaint())
        {
            backgroundPaint.Style = SKPaintStyle.Fill;
            backgroundPaint.Color = SKColors.White;

            var r = Width / 2;
            context.Canvas.DrawCircle(X + r, Y + r, r, backgroundPaint);
        }

        base.OnDraw(context, paint);
    }
}

Form code behind

using System.Windows.Forms;
using LiveChartsCore.SkiaSharpView.WinForms;
using ViewModelsSamples.Lines.Custom;

namespace WinFormsSample.Lines.Custom;

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);
    }
}

Articles you might also find useful:

Cartesian chart control
Line series properties