Axis Labels jitter when updating in realtime

[pm-kuerten]

Describe the bug
When updating an Axis in realtime under WPF the characters of the labels start jittering.

To Reproduce
Steps to reproduce the behavior:

1. Create a WPF project
2. Create a plot with an Axis (like DateTimeAxis)
3. Add data or update Limits in realtime (60 times/s in my case)
4. Display Plot

Expected behavior
Smooth transition of the text accross the screen.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Version: 11
• Plattfrom: WPF with .Net 8.0

Additional context
I am using version 2.0.0-rc5.4 of LiceChartsCore.SkiaSharpView.WPF

[beto-rodriguez]

Hi

Measuring strings is something SkiaSharp is not really good at, that for sure causes this.

About what we can do? Not completely sure, I'll try the new API in SkiaSharp 3 and see if it's helpful, for now even the library uses SkiaSharp3, it is using the obsolete API in 2.8.x because we need to support Avalonia (requires this SkiaSharp version).

[pm-kuerten]

Not sure if this helps or not but I am currently migrating from OxyPlot to LiveCharts, so I can show how it looks there.
Although the general movement is laggy, probably because of different rendering logic, the text itself dos not jitter. Both depend on SkiaSharp so at least theoretically it should be possible.

[beto-rodriguez]

I think that you are not noticing that in Oxyplot because LiveCharts has much more frames per second, the current version in NuGet draws at least 60 FPS, while on the dev branch the FPS are much higher.

An alternative is to disable animations; this way you should see something similar to OxyPlot.

Take a look at this example:

The same "now" string is drawn differently, I mean is not where LiveCharts places the label, there we can clearly see that the distance between each letter is different from draw to draw, I even set IsAntialias to false and SubpixelText to false, I don't know what else we can do there to help SkiaSharp, maybe there is something we can do, but I'm not completely sure.

[pm-kuerten]

I did some testing and found a solution. You need to set Subpixel=true on the font to draw the label.
I confirmed this by adding the following to LabelGeomtry.cs

private static readonly SKFont _font = new SKFont(SKTypeface.Default, 20f)
{
    Subpixel = true   
};

and changing

context.Canvas.DrawText(line, X + ao.X + p.Left, Y + ao.Y + p.Top + lhd + verticalPos, paint);

to

context.Canvas.DrawText(line, X + ao.X + p.Left, Y + ao.Y + p.Top + lhd + verticalPos, _font, paint);

[beto-rodriguez]

Definitely Subpixel = true and also rounding the label coordinates makes labels position super stable. This seems a good default for the library.