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="WinUISample.Scatter.Custom.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
    xmlns:vms="using:ViewModelsSamples.Scatter.Custom"
    xmlns:local="using:WinUISample.Scatter.Custom"
    mc:Ignorable="d">

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

    <lvc:CartesianChart>
        <lvc:CartesianChart.Series>
            <lvc:SeriesCollection>
                <!--
                The HeartScatterSeries is a scatter series that draws a heart shape.
                -->
                <local:HeartScatterSeries
                    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
                -->
                <local:SvgScatterSeries
                    Values="{Binding Values2}"
                    GeometrySvg="{Binding PinPath}"
                    GeometrySize="40" />
                <!--
                Finally you can also use SkiaSharp to draw your own geometry
                -->
                <local:MyGeometryScatterSeries
                    Values="{Binding Values3}"
                    GeometrySize="40" />
            </lvc:SeriesCollection>
        </lvc:CartesianChart.Series>
    </lvc:CartesianChart>

</UserControl>

CustomSeries.cs

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using LiveChartsCore.Defaults;
using ViewModelsSamples.Scatter.Custom;
using LiveChartsCore.SkiaSharpView.WinUI;

namespace WinUISample.Scatter.Custom;

// WinUI xaml parser does not support generic types
// we instead create non-generic classes that inherit from the generic one.
public class HeartScatterSeries : XamlScatterSeries<ObservablePoint, HeartGeometry> { }
public class SvgScatterSeries : XamlScatterSeries<ObservablePoint, VariableSVGPathGeometry> { }
public class MyGeometryScatterSeries : XamlScatterSeries<ObservablePoint, MyGeometry> { }

Articles you might also find useful: