Line Geometries

The [ObservableObject], [ObservableProperty] and [ICommand] attributes come from the CommunityToolkit.Mvvm package, you can read more about it here.

This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.

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

XAML

<UserControl x:Class="AvaloniaSample.Lines.Custom.View"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.Lines.Custom">
  <UserControl.DataContext>
    <vms:ViewModel/>
  </UserControl.DataContext>
  <lvc:CartesianChart Series="{Binding Series}"/>
</UserControl>

Articles you might also find useful:

Cartesian chart control
Line series properties