LiveCharts2 icon indicating copy to clipboard operation
LiveCharts2 copied to clipboard

Long X-axis labels overlap, making them unreadable (e.g. dates)

Open EricEzaM opened this issue 2 years ago • 1 comments

Describe the bug X-axis labels overlap when they are long and are thus unreadable. For example, using dates. Related: #424

Non-ideal workaround: Use the label rotation e.g. -20.

To Reproduce Follow the default implementation in the docs, and then bind the axes:

public Axis[] XAxes { get; set; } = new[]
        {
            new Axis()
            {
                Labeler = point => $"Long label: {point}"
            },
        };

Expected behavior Ideally, the labels which cause overlaps would not be rendered. So in the case below, labels 0, 2, 4 and 6 would be kept, and the other not rendered (assuming 0,2,4,6 do not overlap eachother). I guess you would always want some labels, so the first and last point could be forced on even if they overlap - then it is up to the user to fix their label formatter.

Screenshots image

Desktop (please complete the following information):

  • OS: Windows 10, .NET Framework 4.8

EricEzaM avatar May 13 '22 01:05 EricEzaM

I'm experiencing the same. Thanks for reporting.

korneliuscode avatar Jun 09 '22 15:06 korneliuscode

This is fixed with the referenced PR and will be included in the next version of the library, thanks for the report!

beto-rodriguez avatar Sep 04 '22 18:09 beto-rodriguez

Hi @beto-rodriguez, there are some edge cases where this appears to still not be fixed. It might be date specific or it might not, but I have been able to reproduce with dates axes. To reproduce:

Modify samples/ViewModelsSamples/Axes/DateTimeScaled/ViewModel.cs to be:

public partial class ViewModel : ObservableObject
{
    static IEnumerable<DateTimePoint> GenValues(int count)
    {
        var arr = new DateTimePoint[count];

        arr[0] = new DateTimePoint(DateTime.Now, 0);
        for (int i = 1; i < count; i++)
        {
            arr[i] = new DateTimePoint(arr[i - 1].DateTime.AddSeconds(i), i);
        }

        return arr;
    }

    public ISeries[] Series { get; set; } =
    {
        new LineSeries<DateTimePoint>
        {
            Values = new ObservableCollection<DateTimePoint>(GenValues(100)),
            LineSmoothness = 0,
        }
    };

    public Axis[] XAxes { get; set; } =
    {
        new DateTimeAxis(TimeSpan.FromSeconds(1), date => date.ToString("d/M/yy HH:mm:ss"))
    };
}

Add ZoomMode="X" to the view (I am using WPF)

Run the app, go to Axes/DateTimeScaled and observe:

https://github.com/beto-rodriguez/LiveCharts2/assets/41730826/24408dad-6851-47cd-9594-f5b88ae5500c

EricEzaM avatar Oct 25 '23 00:10 EricEzaM

I actually also still have this behavior on some charts with date values (in different formats).

korneliuscode avatar Nov 09 '23 19:11 korneliuscode

I made improvements to the labels measurement, in the next version (rc2) the library is much better at it, at least I can no longer reproduce with your snippet @EricEzaM:

scroll

beto-rodriguez avatar Nov 10 '23 15:11 beto-rodriguez