beto-rodriguez/LiveCharts2

Large Labels in RowSeries

Closed this issue · 1 comments

Describe the bug

When creating a RowSeries chart in Windows/WPF, there is no way to define the maximum size of the Y Axis Labels, which ends up squeezing the chart into a small space.

image

In addition, regardless of the size of these labels, when using "DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Right" the values ​​are always truncated to the right.

image

I created a small example to replicate the problem, see the code below.

XAML:

<Window
    x:Class="teste_grafico_ranking.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:teste_grafico_ranking"
    xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">

    <Window.DataContext>
        <local:MainVM />
    </Window.DataContext>

    <lvc:CartesianChart
        YAxes="{Binding YAxes}"
        Series="{Binding Series}">
    </lvc:CartesianChart>
</Window>

VM.cs

using LiveChartsCore.SkiaSharpView;
using LiveChartsCore;
using System.Collections.ObjectModel;
using SkiaSharp;
using LiveChartsCore.SkiaSharpView.Painting;

namespace teste_grafico_ranking;

public class MainVM
{
    private ObservableCollection<int> _valores = [134938, 2283287, 323928, 22938298];

    public ISeries[] Series { get; set; }
    public Axis[] YAxes { get; set; } =
    {
        new Axis {
            Labels = ["São Paulo", "São José do Rio Preto", "Santa Piraporinha do Oeste", "Nome de cidade muito grande que acaba quebrando o layout"],
            IsVisible = true
        }
    };

    public MainVM()
    {
        Series = [
            new RowSeries<int> {
                Values = _valores,
                DataLabelsPaint = new SolidColorPaint(new SKColor(0, 0, 0)),
                DataLabelsPosition = LiveChartsCore.Measure.DataLabelsPosition.Right
            }
       ];
    }
}

Hi

You can create multiline labels, for example you can transofrm your label into multiple lines by splitting the string with \r\n or Environment.NewLine

"Nome de cidade muito grande\r\nque acaba quebrando o layout"

The series does not automatically consider the label size to determine the axis range, in a case like this you could use the Series.DataPadding, this property controls the distance between the data end and the axis end.

Gets or sets the data padding, the distance from the edge of the chart to where the series is drawn, both coordinates (X and Y) from 0 to 1, where 0 is nothing and 1 is the axis tick (the separation between every label).

In your case this worked for me DataPadding = new(3, 0), and the result:

image

I will close this for now since it seems that this resolved the question, feel free to reply if there is something else i can help with.