c# Live Charts how to use Formatter

Question

I'm a bit of a c# n00b and a complete Live Charts n00b. I'm trying to create a simple graph that spans a number of days. The graph displays the data but the date label does not format correctly on the X Axis. I believe its because of how I'm using the Live Charts Formatter.

XAML in MainWindow

<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:CartesianChart.AxisX>
<lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>

Function that creates chart.

MainWindow _MainWindow = (MainWindow)Application.Current.MainWindow;

//Days
var dayConfig = Mappers.Xy<DateModel>().X(dateModel => dateModel.DateTime.Ticks / TimeSpan.FromDays(1).Ticks).Y(dateModel => dateModel.Value);

Func<double, string> Formatter = value => new DateTime((long)(value * TimeSpan.FromDays(1).Ticks)).ToString("d");

_MainWindow.Formatter = value => new DateTime((long)(value * TimeSpan.FromDays(1).Ticks)).ToString("d");

SeriesCollection Series = new SeriesCollection(dayConfig)
{
    new LineSeries
    {
        Values = new ChartValues<DateModel>
        {
            new Wpf.CartesianChart.Using_DateTime.DateModel
            {
                DateTime    = System.DateTime.Now,
                Value       = 5
            },
            new Wpf.CartesianChart.Using_DateTime.DateModel
            {
                DateTime    = System.DateTime.Now.AddDays(1),
                Value       = 9
            },
            new Wpf.CartesianChart.Using_DateTime.DateModel
            {
                DateTime    = System.DateTime.Now.AddDays(2),
                Value       = 4
            }
        },

        Fill = Brushes.Transparent
    },

};

Application.Current.Dispatcher.Invoke((Action)delegate
{
    if (_MainWindow.ct.IsCancellationRequested) return;

    _MainWindow.RankGraph.Series = Series;

});

I'm also setting the Formatter in mainwindow.cs

public Func<double, string> Formatter   { get; set; }           = value => new DateTime((long)(value * TimeSpan.FromDays(1).Ticks)).ToString("d");

I've tried declaring the Formatter pretty much everywhere but it doesn't look like the XAML in using it. The code above produces the graph below.

How do I correctly use the Formatter option when creating the graph from a simple method rather than in a UserControl class wrapper as all the examples show.

in my instance it was because I didn't set the data content to this. Its on the examples. Whats the problem you're having? — Mr J, May 22 '17 at 15:52

Daulet Kshibekov · Answer 1 · 2018-11-07T04:13:46.143

1

For some reason, the bindings in XAML don't work sometimes. You need to name your LiveCharts controls in XAML (to anything):

<lvc:CartesianChart x:Name="RankGraph" Series="{Binding Series}">
<lvc:Axis x:Name="RankGraphAxisX" LabelFormatter="{Binding Formatter}"></lvc:Axis>

and then bind both Series and LabelFormatter in your code behind:

RankGraph.Series = Series;
RankGraphAxisX.LabelFormatter = Formatter;

edited Nov 07 '18 at 04:13

answered Nov 06 '18 at 02:39

Daulet Kshibekov

181
2
2
8

score 1 · Answer 2 · answered Jun 17 '22 at 06:21

I noticed this also, but I'm using MVVM and it's not working even if I move the Formatter = value => value.ToString("N"); before setting the values to ChartValues() and SeriesCollection. What I did is

Name the axis:

<lvc:CartesianChart.AxisY>
    <lvc:Axis x:Name="SalesGraphAxisY" Title="Sold Apps"></lvc:Axis>
</lvc:CartesianChart.AxisY>

In the code-behind.

public MerchandiseAnalysisByCategory()
{
      InitializeComponent();

      Formatter = value => value.ToString("N");
      SalesGraphAxisY.LabelFormatter = Formatter;
}

public Func<double, string> Formatter { get; set; }

Make sure that Formatter = value => value.ToString("N"); comes first.

c# Live Charts how to use Formatter

2 Answers2