Sample C# Winforms example using Candlestick charts

[preintel]

Took me a few minutes to figure the class structure out, so thought I would just share the complete step by step in the discussion for others unable to get it working on Winforms.

1. Before starting make sure you have the .net framework SDK package installed (4.6.2) (https://dotnet.microsoft.com/download/visual-studio-sdks) , can use it with .net 3.0 or 5.0 core.
2. Use nuget and install the LiveCharts2 package: (in Visual Studio go to Tools->Nuget package manager->Manage nuget packages...), go to browse in nuget manager, check off the Include prerelease checkbox and search for LiveCharts and install the following: LiveChartsCore, LiveChartsCore.SkiaSharpView, LiveChartsCore.SkiaSharpView.WinForms. (this will install the LiveCharts2 to your Winform program).
3. On your selected form (eg: Form 1) designer you need to add the cartesian chart control from the package, go to Toolbox panel on left and right click inside it, select Choose items..., under .Net framework components click on Browse..., search for the location of your file LiveChartsCore.SkiaSharpView.Winforms.dll (is typically in the src->skiasharp->LiveChartsCore.SkiaSharpView.Winforms->bin->Debug->net462 folder from where you downloaded the package src folder to).
4. After adding the dll file click ok, now in your toolbox you should have cartesianchart available, if you don't see it use the searchbox at the top of toolbox and search for cartesian. Drag this control to your form to create it.
5. Now depending on what type of chart you want you can include the ViewModel class file for it, under Solution Explorer right your project and select Add->Exisiting Item... Now find the samples folder and go to the ViewModelsSamples, select the type of chart class you want, for example the ViewModel.cs file for Candlesticks is located here: (\samples\ViewModelsSamples\Financial\BasicCandlesticks), add this ViewModel.cs class to your project.
6. On your Form code, add the following references:
   using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using LiveChartsCore.SkiaSharpView.WinForms; using ViewModelsSamples.Financial.BasicCandlesticks; using LiveChartsCore; using LiveChartsCore.Defaults; using LiveChartsCore.SkiaSharpView; using System.Collections.ObjectModel;
7. In the part of your code where you want to make the chart, add the following code (may differ depending on the type of ViewModel class and type of chart you are trying to build, this example is for candlesticks:

ViewModel viewM = new ViewModel(); //Creates a new ViewModel class we can customize later...
List<FinancialPoint> fPList = new List<FinancialPoint>(); //create a list of FinancialPoint
//Populate the list with some random data for now: 
for (int i = 0; i < 10; i++)
            {
                fPList.Add(new FinancialPoint(new DateTime(2021, i + 1, 1), 100, 90, 70, 60));
            }

//Customize the viewM class XAxes which we will later use for our chart
  viewM.XAxes = new[]
            {
                new Axis
                {
                    Name = "Date",
                    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
                }
            };

            //Customize the viewM class YAxes which we will later use for our chart
            viewM.YAxes = new[]
            {
                new Axis
                {
                    Labeler = value => "$"+value.ToString(),
                    // 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 = 1 //Default is 1
                }
            };

//cartesianChart1 should be name of your control we added earlier:
cartesianChart1.Series = viewM.Series; //Set the Series for the chart using the viewM class
cartesianChart1.XAxes = viewM.XAxes; //Set the XAxes[] array
cartesianChart1.YAxes = viewM.YAxes; //Set the YAxes[] array
cartesianChart1.Update(); //Update chart (not sure if this is needed in LiveCharts though ;)

Here is the example ViewModel for candlesticks that includes the YAxes definition:

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

namespace ViewModelsSamples.Financial.BasicCandlesticks
{
    public class ViewModel
    {
        // we have to let the chart know that the X axis in days.
        public Axis[] XAxes { get; set; } = new[]
        {
            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 Axis[] YAxes { get; set; } = new[]
        {
            new Axis
            {
                Labeler = value => "$"+value.ToString(),
                // 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 = 1
            }
        };

        public IEnumerable<ISeries> Series { get; set; } = new ObservableCollection<ISeries>
        {
            new CandlesticksSeries<FinancialPoint>
            {
                Values = new ObservableCollection<FinancialPoint>
                {
                    //                                 date, high, open, close, low
                    new FinancialPoint(new DateTime(2021, 1, 1), 523, 500, 450, 400),
                    new FinancialPoint(DateTime.Now, 630, 610, 630, 590),
                }
            }
        };
    }
}

[ojutan]

hi, the Nuget Package manager doesnt show LifeCharts2 any more... has it been renamed or retired? I did the "include prerelease" checkbox ...