Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XAxes disappear when using mapping of DateTime #1466

Open
cris-m opened this issue Mar 21, 2024 · 0 comments
Open

XAxes disappear when using mapping of DateTime #1466

cris-m opened this issue Mar 21, 2024 · 0 comments

Comments

@cris-m
Copy link

cris-m commented Mar 21, 2024

XAxes disappear when using mapping of DateTime. I have the following data:

public class Transaction
{
    public string TransactionId { get; set; }
    public string ReferenceNumber { get; set; }
    public string RecipientId { get; set; }
    public string RecipientName { get; set; }
    public string Country { get; set; }
    public string CurrencyCode { get; set; }
    public string PaymentMethod { get; set; }
    public double Amount { get; set; }
    public double TransactionFee { get; set; }
    public TransactionStatus Status { get; set; }
    public TransactionType TransactionType { get; set; }
    public DateTime DateTime { get; set; }
}

public ObservableCollection<Transaction> Transactions = new ObservableCollection<Transaction>
    {
        new Transaction
        {
            TransactionId = Guid.NewGuid().ToString(),
            ReferenceNumber = "REF2103210930423",
            RecipientId = "123",
            RecipientName = "Alice",
            Country = "DRC",
            CurrencyCode = "USD",
            PaymentMethod = "Credit Card",
            Amount = 100.0,
            TransactionFee = 2.0,
            Status = TransactionStatus.Completed,
            TransactionType = TransactionType.Deposit,
            DateTime = DateTime.Now.AddDays(-2)
        },
        new Transaction
        {
            TransactionId = Guid.NewGuid().ToString(),
            ReferenceNumber = "REF2103210930123",
            RecipientId = "456",
            RecipientName = "Bob",
            Country = "US",
            CurrencyCode = "USD",
            PaymentMethod = "Mobile Money",
            Amount = 340.0,
            TransactionFee = 1.0,
            Status = TransactionStatus.Completed,
            TransactionType = TransactionType.Withdrawal,
            DateTime = DateTime.Now.AddDays(2)
        }
  }

I create a list of series and axis

public List<ISeries> Series { get; set; } = new List<ISeries>();
public List<Axis> XAxes { get; set; } = new List<Axis>();
 public List<Axis> YAxes { get; set; } = new List<Axis>();

Series.Add(new LineSeries<Transaction>
{
    Name = "Received",
    DataLabelsSize = 4,
    LineSmoothness = 2,
    GeometryStroke = new SolidColorPaint(Themes.Current.Primary.ToSKColor(), 2.0f),
    GeometryFill = new SolidColorPaint(Themes.Current.Background.ToSKColor()),
    GeometrySize = 10,
    Fill = new LiveChartsCore.SkiaSharpView.Painting.LinearGradientPaint(
        new[] {

            Themes.Current.Primary.ToSKColor(150),
            Colors.Transparent.ToSKColor(),
         },
        new SKPoint(0.5f, 0),
        new SKPoint(0.5f, 1)
    )
    { StrokeThickness = 10 },
    Stroke = new SolidColorPaint(Themes.Current.Primary.ToSKColor()) { StrokeThickness = 2 },
    Values = new ObservableCollection<Transaction>(transations),
    Mapping = (x, point) => new Coordinate(x.DateTime.Ticks, x.Amount)
};

Axes.Add(
new Axis
{
    TextSize = 10,
    Labels = transations.Select(t => t.DateTime.ToString("MMMM dd")).ToArray(),
    Padding = new LiveChartsCore.Drawing.Padding(4),
    LabelsRotation = 45,
    LabelsPaint = new SolidColorPaint(Themes.Current.OnBackground.ToSKColor()),
    SeparatorsAtCenter = false,
    DrawTicksPath = true
};

Axes.Add(
new Axis
{
    IsVisible = false
};

Now using on CartesianChart chart

new CartesianChart()
    .Series(Series)
    .HeightRequest(200)
    .TooltipPosition(TooltipPosition.Top)
    .AnimationsSpeed(new TimeSpan(0, 0, 0, 0, 500))
    .EasingFunction((time) => time * time)
    .DrawMargin(new Margin(5))
    .XAxes(XAxes)
    .YAxes(YAxes)

Here is the result

  • Padding is added on the bottom of she chart
  • Chart height is not correct.
  • XAxes is invisible.

Using the following like in documentation I get an error:

Mapping = (transaction, point) => {
      point.Coordinate = new Coordinate(transaction.DateTime, transaction.Amount)
  }

Not all code paths return a value in lambda expression of type 'Func<Transaction, int, Coordinate>'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant