Basic Candle Sticks

sample image sample image

Razor

@page "/Financial/BasicCandlesticks"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using System.Collections.ObjectModel

<CartesianChart
    Series="@series"
    XAxes="@xAxes">
</CartesianChart>

@code {
    private static ObservableCollection<FinancialPoint> values = new ObservableCollection<FinancialPoint>
    {
        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 }
    };
    private static string dateFormatter(DateTime value) => value.ToString("yyyy MMM dd");

    private ISeries[] series = new ISeries[]
    {
        new CandlesticksSeries<FinancialPoint> { Values = values }
    };

    private Axis[] xAxes = new Axis[]
    {
        new DateTimeAxis(TimeSpan.FromDays(1), dateFormatter)
        {
            LabelsRotation = 0
        }
    };
}

Articles you might also find useful:

Cartesian chart control
Candlesticks series properties