Custom S V G Scatter Points

View model

using System;
using LiveChartsCore.Defaults;
using LiveChartsCore.Drawing;

namespace ViewModelsSamples.Scatter.Custom;

public class ViewModel
{
    private static readonly Random s_r = new();
    public ObservablePoint[] Values1 { get; set; } = Fetch();
    public ObservablePoint[] Values2 { get; set; } = Fetch();
    public ObservablePoint[] Values3 { get; set; } = Fetch();
    public string PinPath { get; } = SVGPoints.Pin;

    private static ObservablePoint[] Fetch()
    {
        var length = 10;
        var values = new ObservablePoint[length];

        for (var i = 0; i < length; i++)
        {
            var x = s_r.Next(0, 20);
            var y = s_r.Next(0, 20);
            values[i] = new ObservablePoint(x, y);
        }

        return values;
    }
}

MyGeometry.cs

using LiveChartsCore.Drawing;
using LiveChartsCore.SkiaSharpView.Drawing;

namespace ViewModelsSamples.Scatter.Custom;

public class MyGeometry : BoundedDrawnGeometry, IDrawnElement<SkiaSharpDrawingContext>
{
    public void Draw(SkiaSharpDrawingContext context)
    {
        var paint = context.ActiveSkiaPaint;
        var canvas = context.Canvas;
        var y = Y;

        while (y < Y + Height)
        {
            canvas.DrawLine(X, y, X + Width, y, paint);
            y += 10;
        }
    }
}

XAML

<UserControl
    x:Class="AvaloniaSample.Scatter.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.Scatter.Custom"
    xmlns:svg="using:LiveChartsCore.Drawing"
    xmlns:draw="using:LiveChartsCore.SkiaSharpView.Drawing.Geometries"
    xmlns:d="using:LiveChartsCore.Defaults"
    x:DataType="vms:ViewModel">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>

    <lvc:CartesianChart>
        <lvc:CartesianChart.Series>
            <!--
            Use the generic type arguments to set the type of the geometry to draw,
            here are many predefined geometries in the LiveChartsCore.SkiaSharpView.Drawing.Geometries
            namespace, for example, the StarGeometry, CrossGeometry, RectangleGeometry and DiamondGeometry

            The first type argument is the type of data.
            The second type argument is the type of geometry to draw.
            -->

            <lvc:XamlScatterSeries
                x:TypeArguments="d:ObservablePoint, draw:HeartGeometry"
                Values="{Binding Values1}"
                Stroke="{x:Null}"
                GeometrySize="40" />

            <!--
            You can also use SVG paths to draw the geometry
            the VariableSVGPathGeometry can change the drawn path at runtime
            -->
            <lvc:XamlScatterSeries
                x:TypeArguments="d:ObservablePoint, draw:VariableSVGPathGeometry"
                Values="{Binding Values2}"
                GeometrySvg="{Binding PinPath}"
                GeometrySize="40"/>

            <!--
            Finally you can also use SkiaSharp to draw your own geometry
            -->
            <lvc:XamlScatterSeries
                x:TypeArguments="d:ObservablePoint, vms:MyGeometry"
                Values="{Binding Values3}"
                GeometrySize="40"/>

        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>
</UserControl>

Articles you might also find useful: