Line Geometries

View model

using LiveChartsCore.Drawing;

namespace ViewModelsSamples.Lines.Custom;

public class ViewModel
{
    public double[] Values1 { get; set; } =
        [2, 1, 4, 2, 2, -5, -2];

    public double[] Values2 { get; set; } =
        [3, 3, -3, -2, -4, -3, -1];

    public double[] Values3 { get; set; } =
        [-2, 2, 1, 3, -1, 4, 3];

    public double[] Values4 { get; set; } =
        [4, 5, 2, 4, 3, 2, 1];

    public string PinPath { get; set; } =
        SVGPoints.Pin;
}

MyGeometry.cs

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

namespace ViewModelsSamples.Lines.Custom;

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

    canvas.DrawRect(X, Y, Width, Height, paint);
    canvas.DrawLine(X, Y, X + Width, Y + Height, paint);
    canvas.DrawLine(X + Width, Y, X, Y + Height, paint);
}

}

XAML```

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

<lvc:CartesianChart>
    <lvc:CartesianChart.Series>
        <lvc:SeriesCollection>
            <!--
            The CustomStarLineSeries is a line series that draws a star shape.
            -->
            <lvc:XamlLineSeries
                Values="{Binding Values1}"
                Fill="{x:Null}"
                GeometrySize="20"/>

            <local:CustomStarLineSeries
                Values="{Binding Values2}"
                Fill="{x:Null}"
                GeometrySize="20"/>

            <!--
            You can also use SVG paths to draw the geometry
            the VariableSVGPathGeometry can change the drawn path at runtime
            -->
            <local:CustomVariableSVGPathLineSeries
                GeometrySvg="{Binding PinPath}"
                Values="{Binding Values3}"
                Fill="{x:Null}"
                GeometrySize="20"/>

            <!--
            Finally you can also use SkiaSharp to draw your own geometry
            -->
            <local:CustomMyGeometryLineSeries
                Values="{Binding Values4}"
                Fill="{x:Null}"
                GeometrySize="20"/>
        </lvc:SeriesCollection>
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

## CustomSeries.cs

```csharp
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using LiveChartsCore.SkiaSharpView.WinUI;
using ViewModelsSamples.Lines.Custom;

namespace WinUISample.Lines.Custom;

// WinUI xaml parser does not support generic types
// we instead create non-generic classes that inherit from the generic one.
public class CustomStarLineSeries : XamlLineSeries<double, StarGeometry> { }
public class CustomVariableSVGPathLineSeries : XamlLineSeries<double, VariableSVGPathGeometry> { }
public class CustomMyGeometryLineSeries : XamlLineSeries<double, MyGeometry> { }


### Articles you might also find useful:


<div>
<a href="https://livecharts.dev/docs/winui/2.0.0-rc6/CartesianChart.Cartesian%20chart%20control">
Cartesian chart control
</a>
</div>


<div>
<a href="https://livecharts.dev/docs/winui/2.0.0-rc6/CartesianChart.Line%20Series%20properties">
Line series properties
</a>
</div>