Wind Direction

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

}

Code behind

using Eto.Forms;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
using LiveChartsCore.SkiaSharpView.Eto;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;

namespace EtoFormsSample.Lines.CustomPoints;

public class DataPoint
{
    public int Value { get; set; }
    public float Rotation { get; set; }
}

public class ArrowGeometry : BaseSVGPathGeometry
{
    private static SKPath _path = SKPath.ParseSvgPathData(
        "M12.75 20C12.75 20.4142 12.4142 20.75 12 20.75C11.5858 20.75 11.25 20.4142 11.25 " +
        "20L11.25 10.75H6.00002C5.69668 10.75 5.4232 10.5673 5.30711 10.287C5.19103 10.0068 " +
        "5.25519 9.68417 5.46969 9.46967L11.4697 3.46967C11.6103 3.32902 11.8011 3.25 12 " +
        "3.25C12.1989 3.25 12.3897 3.32902 12.5304 3.46967L18.5304 9.46967C18.7449 9.68417 " +
        "18.809 10.0068 18.6929 10.287C18.5768 10.5673 18.3034 10.75 18 10.75H12.75L12.75 20Z");

    public ArrowGeometry() : base(_path) { }
}

public class CustomArrowLineSeries : LineSeries<DataPoint, ArrowGeometry>
{
    public CustomArrowLineSeries()
    {
        LiveCharts.Configure(config =>
            config.HasMap<DataPoint>((dataPoint, index) => new(index, dataPoint.Value)));

        GeometryFill = new SolidColorPaint(SKColor.Parse("#C71585"));
        GeometryStroke = null;
        Fill = null;
        GeometrySize = 50;
        PointMeasured += (point) =>
        {
            var dataPoint = (DataPoint)point.Context.DataSource;
            point.Context.Visual.TransformOrigin = new(0f, 0f);
            point.Context.Visual.RotateTransform = dataPoint.Rotation;
        };
    }
}

public class View : Panel
{
    public View()
    {
        var values = new DataPoint[]
        {
            new() { Value = 4, Rotation = 0 },
            new() { Value = 6, Rotation = 20 },
            new() { Value = 8, Rotation = 90 },
            new() { Value = 2, Rotation = 176 },
            new() { Value = 7, Rotation = 55 },
            new() { Value = 9, Rotation = 226 },
            new() { Value = 3, Rotation = 320 }
        };

        var series = new ISeries[]
        {
            new CustomArrowLineSeries
            {
                Values = values
            }
        };

        var cartesianChart = new CartesianChart
        {
            Series = series
        };

        Content = cartesianChart;
    }
}

Articles you might also find useful: