LiveCharts2
LiveCharts2 copied to clipboard
Long X-axis labels overlap, making them unreadable (e.g. dates)
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
Desktop (please complete the following information):
- OS: Windows 10, .NET Framework 4.8
I'm experiencing the same. Thanks for reporting.
This is fixed with the referenced PR and will be included in the next version of the library, thanks for the report!
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
I actually also still have this behavior on some charts with date values (in different formats).
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: