Basic Candle Sticks

View Model

using System;
using System.Collections.ObjectModel;
using LiveChartsCore.Defaults;

namespace ViewModelsSamples.Financial.BasicCandlesticks;

public class ViewModel
{
    public ObservableCollection<FinancialPoint> Values { get; set; } = [
        new() { Date = new DateTime(2021, 1, 1), High = 523, Open = 500, Close = 450, Low = 400 },
        new() { Date = new DateTime(2021, 1, 2), High = 500, Open = 450, Close = 425, Low = 400 },
        new() { Date = new DateTime(2021, 1, 3), High = 490, Open = 425, Close = 400, Low = 380 },
        new() { Date = new DateTime(2021, 1, 4), High = 420, Open = 400, Close = 420, Low = 380 },
        new() { Date = new DateTime(2021, 1, 5), High = 520, Open = 420, Close = 490, Low = 400 },
        new() { Date = new DateTime(2021, 1, 6), High = 580, Open = 490, Close = 560, Low = 440 }
    ];

    public Func<DateTime, string> DateFormatter { get; set; } = value => value.ToString("yyyy MMM dd");
}

XAML

<UserControl
    x:Class="AvaloniaSample.Financial.BasicCandlesticks.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.Financial.BasicCandlesticks"
    x:DataType="vms:ViewModel">

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

    <lvc:CartesianChart>

        <lvc:CartesianChart.Series>
            <lvc:XamlCandlesticksSeries Values="{Binding Values}"/>
        </lvc:CartesianChart.Series>

        <lvc:CartesianChart.XAxes>
            <lvc:XamlDateTimeAxis
                Interval="1.00:00:00"
                DateFormatter="{Binding DateFormatter}"
                LabelsRotation="0"/>
        </lvc:CartesianChart.XAxes>
        
    </lvc:CartesianChart>

</UserControl>

Articles you might also find useful: