Basic Candle Sticks
Hover over the image to see the chart animation
The [ObservableObject], [ObservableProperty] and [ICommand] attributes come from the
CommunityToolkit.Mvvm package, you can read more about it
here.
This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.
View Model
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.Financial.BasicCandlesticks;
public partial class ViewModel : ObservableObject
{
// we have to let the chart know that the X axis in days.
public Axis[] XAxes { get; set; } =
{
new Axis
{
LabelsRotation = 15,
Labeler = value => new DateTime((long)value).ToString("yyyy MMM dd"),
// set the unit width of the axis to "days"
// since our X axis is of type date time and
// the interval between our points is in days
UnitWidth = TimeSpan.FromDays(1).Ticks
}
};
public ISeries[] Series { get; set; } =
{
new CandlesticksSeries<FinancialPoint>
{
Values = new ObservableCollection<FinancialPoint>
{
// date, high, open, close, low
new(new DateTime(2021, 1, 1), 523, 500, 450, 400),
new(new DateTime(2021, 1, 2), 500, 450, 425, 400),
new(new DateTime(2021, 1, 3), 490, 425, 400, 380),
new(new DateTime(2021, 1, 4), 420, 400, 420, 380),
new(new DateTime(2021, 1, 5), 520, 420, 490, 400),
new(new DateTime(2021, 1, 6), 580, 490, 560, 440),
new(new DateTime(2021, 1, 7), 570, 560, 350, 340),
new(new DateTime(2021, 1, 8), 380, 350, 380, 330),
new(new DateTime(2021, 1, 9), 440, 380, 420, 350),
new(new DateTime(2021, 1, 10), 490, 420, 460, 400),
new(new DateTime(2021, 1, 11), 520, 460, 510, 460),
new(new DateTime(2021, 1, 12), 580, 510, 560, 500),
new(new DateTime(2021, 1, 13), 600, 560, 540, 510),
new(new DateTime(2021, 1, 14), 580, 540, 520, 500),
new(new DateTime(2021, 1, 15), 580, 520, 560, 520),
new(new DateTime(2021, 1, 16), 590, 560, 580, 520),
new(new DateTime(2021, 1, 17), 650, 580, 630, 550),
new(new DateTime(2021, 1, 18), 680, 630, 650, 600),
new(new DateTime(2021, 1, 19), 670, 650, 600, 570),
new(new DateTime(2021, 1, 20), 640, 600, 610, 560),
new(new DateTime(2021, 1, 21), 630, 610, 630, 590),
}
}
};
}
XAML
<UserControl
x:Class="UnoWinUISample.Financial.BasicCandlesticks.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.Financial.BasicCandlesticks"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<Grid>
<lvc:CartesianChart
Series="{Binding Series}"
XAxes="{Binding XAxes}">
</lvc:CartesianChart>
</Grid>
</UserControl>
