Vertical and horizontal misalignment for rotated labels in column chart

[hnnngwdlch]

Hi,

I noticed that when I use a column chart and rotate my labels by 90 degrees (in order to align them with the columns), not all of them are rendered correctly.

For some there is a horizontal offset (see data points 2 and 11 in the screenshot) and for others the vertical position seems to be not correct. In this example, despite using ChartDataLabelAlignment.outer, some labels start at the bottom or somewhere else along the respective column of the chart.

class _TestGraphState extends State<TestGraph> {
  @override
  Widget build(BuildContext context) {
    final List<DisplayedData> columnSeriesData = [
      DisplayedData('Sleeping', 8.7),
      DisplayedData('Personal Care', 0.8),
      DisplayedData('Eating and drinking', 1.2),
      DisplayedData('Housework', 1.9),
      DisplayedData('Other', 1.3),
      DisplayedData('Childcare / care for others', 0.7),
      DisplayedData('Working', 3.8),
      DisplayedData('Education', 0.5),
      DisplayedData('Socialization', 0.7),
      DisplayedData('Watching television', 2.7),
      DisplayedData('Exercise / recreation', 0.3),
      DisplayedData('Leisure', 1.4),
    ];
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.symmetric(
          vertical: 20,
          horizontal: 0,
        ),
        child: Column(
          children: <Widget>[
            Text(
              'Graph title',
              style: TextStyle(
                fontSize: 20,
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Expanded(
              child: SfCartesianChart(
                primaryXAxis: CategoryAxis(
                  isVisible: false,
                ),
                series: <ChartSeries>[
                  ColumnSeries<DisplayedData, String>(
                    dataSource: columnSeriesData,
                    xValueMapper: (DisplayedData data, _) => data.xValueMapper,
                    yValueMapper: (DisplayedData data, _) => data.yValueMapper,
                    dataLabelSettings: DataLabelSettings(
                      labelAlignment: ChartDataLabelAlignment.outer,
                      isVisible: true,
                      angle: 90,
                    ),
                    dataLabelMapper: (DisplayedData data, _) =>
                        '${data.yValueMapper} (${data.xValueMapper})',
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Best regards,
Henning

[SriramKiranSenthilkumar]

Hi @hnnngwdlch,

Greetings from Syncfusion. We have analyzed your scenario and we are able to replicate reported issue regarding the rotated data labels getting misaligned vertically and horizontally in the column chart. We will consider this as a bug and we will include the fix for the reported issue in our upcoming weekly patch release which is expected to be rolled by 8th September 2020. We will update you once the release is rolled out and we appreciate your patience until then.

Regards,
Sriram Kiran

[AndreHaueisen]

Same thing here

[SriramKiranSenthilkumar]

Hi @AndreHaueisen ,

We have analyzed your scenario and we have created and attached a simple chart sample similar to the provided screenshot by referring our latest chart widget version (18.2.55) and also tried to replicate the reported issue regarding the data label builder misaligning in the chart at our end. Unfortunately, we were not able to replicate it and so we kindly request you to revert us with the current chart widget version you are using in your project and also if possible, kindly try to replicate the reported issue in the below-attached test sample and revert us. This will be helpful in providing the solutions sooner.
Test sample: sample.zip

Also for ensuring the data label builder is aligned properly in the chart with the latest version of our chart widget, we have attached the screenshot below of the attached chart test sample app.
Screenshot:

Regards,
Sriram Kiran

[AndreHaueisen]

@SriramKiranSenthilkumar
Thanks a lot for the sample. It helped me to find the problem. I was using plotOffset and did not realize it did not apply to the labels.
Cheers

[SriramKiranSenthilkumar]

Hi @AndreHaueisen,

Thanks for your revert. We are always happy in assisting you.

Regards,
Sriram Kiran

[SriramKiranSenthilkumar]

Hi @hnnngwdlch ,

Thanks for your patience. The reported issue regarding the rotated data labels getting misaligned vertically and horizontally in the column chart is now fixed and rolled out in our weekly patch release. To overcome the reported issue, kindly please upgrade the chart widget package to the latest version below.
https://pub.dev/packages/syncfusion_flutter_charts/versions/18.2.57

Please get in touch with us if you require further assistance.

Regards,
Sriram Kiran

[hnnngwdlch]

Thank you, it's working now!

[hnnngwdlch]

Hi,

currently I am using version 18.3.38 and using the same code from the initial ticket description, I get the following output on the screen:

Here, using ChartDataLabelAlignment.outer does not produce a coherent result.

Whenever there is enough vertical space to place the labels above the column, I would expect that the data label is placed above the column as in this example with shorter data labels (notice that the only difference between the two screenshots is the length of my data label):

Thanks for your time in advance!
Henning

[SriramKiranSenthilkumar]

Hi @hnnngwdlch,

We have analyzed your scenario with the provided information and we would like to share some information regarding the offset property of the DataLabelSettigns available in the chart with which you can be able to add padding to move the data labels in both vertical and horizontal direction from its position by providing the required logical pixel values for x and y offset values. We hope that this feature will be helpful in your case.

For further reference on the offset property of DataLabelSettings, please check the user guide below.
https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label-padding

Please get in touch with us if you still have further concerns.

Regards,
Sriram Kiran

[hnnngwdlch]

Hi,

I had a look at the offset property. Is there any way to assign different offset values for each data label?

In my case setting an identical offset for all data labels would not lead to the same spacing between the end of the column and the start of the data label.

Thanks
Henning

[SriramKiranSenthilkumar]

Hi @hnnngwdlch,

We have analyzed on your query and we are sorry that currently, we do not have support to assign offset values for individual data labels in the chart. however, we will consider your suggestion as a feature request and we have also logged feedback for it in our feedback portal. We will plan and include the requested feature in any of our upcoming release yet to come. You can also track the status of the requested feature using the below feedback link.
https://www.syncfusion.com/feedback/19275

Regards,
Sriram Kiran

[hnnngwdlch]

Hi,

sounds great! Looking forward to the new feature!

Thanks,
Henning