Date Time Scale
This web site builds the control from code behind but you could also grab it from the toolbox, this sample also uses a ViewModel to populate the properties of the control(s) in this sample.

View model
using System;
using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
namespace ViewModelsSamples.Axes.DateTimeScaled;
public partial class ViewModel : ObservableObject
{
public ISeries[] Series { get; set; } =
{
new ColumnSeries<DateTimePoint>
{
Values = new ObservableCollection<DateTimePoint>
{
new DateTimePoint(new DateTime(2021, 1, 1), 3),
new DateTimePoint(new DateTime(2021, 1, 2), 6),
new DateTimePoint(new DateTime(2021, 1, 3), 5),
new DateTimePoint(new DateTime(2021, 1, 4), 3),
new DateTimePoint(new DateTime(2021, 1, 5), 5),
new DateTimePoint(new DateTime(2021, 1, 6), 8),
new DateTimePoint(new DateTime(2021, 1, 7), 6)
}
}
};
// You can use the DateTimeAxis class to define a date time based axis // mark
// The first parameter is the time between each point, in this case 1 day // mark
// you can also use 1 year, 1 month, 1 hour, 1 minute, 1 second, 1 millisecond, etc // mark
// The second parameter is a function that receives the value and returns the label // mark
public Axis[] XAxes { get; set; } =
{
new DateTimeAxis(TimeSpan.FromDays(1), date => date.ToString("MMMM dd"))
};
}
Form code behind
using System.Windows.Forms;
using LiveChartsCore.SkiaSharpView.WinForms;
using ViewModelsSamples.Axes.DateTimeScaled;
namespace WinFormsSample.Axes.DateTimeScaled;
public partial class View : UserControl
{
private readonly CartesianChart cartesianChart;
public View()
{
InitializeComponent();
Size = new System.Drawing.Size(50, 50);
var viewModel = new ViewModel();
cartesianChart = new CartesianChart
{
Series = viewModel.Series,
XAxes = viewModel.XAxes,
// out of livecharts properties...
Location = new System.Drawing.Point(0, 0),
Size = new System.Drawing.Size(50, 50),
Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom
};
Controls.Add(cartesianChart);
}
}