[syncfusion_flutter_charts] Pie Chart data labels throw Invalid argument(s): string is not well-formed UTF-16

[btrautmann]

I've been getting reports of users experiencing issues with their pie charts, see the below logs:

Stacktrace

Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError: Invalid argument(s): string is not well-formed UTF-16. Error thrown while building a TextSpan.
       at _NativeParagraphBuilder.addText(dart:ui)
       at TextSpan.build(text_span.dart:281)
       at TextPainter._createParagraph(text_painter.dart:1070)
       at TextPainter.layout(text_painter.dart:1125)
       at .drawText(helper.dart:54)
       at .drawLabel(data_label_renderer.dart:1111)
       at .renderCircularDataLabel(data_label_renderer.dart:681)
       at _CircularDataLabelPainter.paint(data_label_renderer.dart:144)
       at RenderCustomPaint._paintWithPainter(custom_paint.dart:588)
       at RenderCustomPaint.paint(custom_paint.dart:630)
       at RenderObject._paintWithContext(object.dart:3208)
       at PaintingContext.paintChild(object.dart:250)
       at RenderProxyBoxMixin.paint(proxy_box.dart:129)
       at RenderObject._paintWithContext(object.dart:3208)
       at PaintingContext._repaintCompositedChild(object.dart:166)
       at PaintingContext.repaintCompositedChild(object.dart:109)
       at PipelineOwner.flushPaint(object.dart:1156)
       at PipelineOwner.flushPaint(object.dart:1166)
       at RendererBinding.drawFrame(binding.dart:593)
       at WidgetsBinding.drawFrame(binding.dart:986)
       at RendererBinding._handlePersistentFrameCallback(binding.dart:457)
       at SchedulerBinding._invokeFrameCallback(binding.dart:1325)
       at SchedulerBinding.handleDrawFrame(binding.dart:1255)
       at SchedulerBinding._handleDrawFrame(binding.dart:1113)

I was able to reproduce this and a repro case is here. Just check that repo out and run the code, the pie chart is the first one in the list.

Note:
The issue is reproduced only (as far as I can tell) when the name ends with an emoji. If the truncation of the labels is being performed by the charts library somewhere (I couldn't find it, but didn't look TOO hard), it's likely an issue similar to this one and needs a slight adjustment to use the String runes as described there.

[LavanyaGowtham2021]

Hi @btrautmann ,

We can be able to replicate the reported issue at our end, issue occurs in framework while try to layout the text painter with partially trimmed emoji. We will check the flutter framework and update the solution for this case. For example, below simple code raises the reported exception.

`

@OverRide
Widget build(BuildContext context) {

String text = '🍕 | A long name from index | 🚀';

int textLength = text.length;

for (int i = textLength - 1; i >= 0; --i) {

  String label = '${text.substring(0, i)}...';

  final TextPainter textPainter = TextPainter(

      textAlign: TextAlign.center,

      textDirection: TextDirection.ltr,

      text: TextSpan(text: label, style: const TextStyle(fontSize: 12)));

  textPainter.layout();

}

…..
}

`

However, you can resolve this issue by using builder data label and you can achieve the same ui with below code snippet.

`

DoughnutSeries<PieChartData, String>(
dataLabelMapper: (entry, _) => entry.id,
dataLabelSettings: DataLabelSettings(
margin: const EdgeInsets.all(4),
isVisible: true,
labelPosition: ChartDataLabelPosition.outside,
borderRadius: 6,
useSeriesColor: true,
builder: (data, point, series, pointIndex, seriesIndex) {
return Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: point.color ?? Colors.white,
borderRadius: BorderRadius.circular(6),
),
child: Text(
point.x.toString(),
style: const TextStyle(
color: Colors.black,
fontSize: 12,
),
),
);
}),
….
);

`

Please let us know if you need any further assistance on this.

Regards,
Lavanya A.

[btrautmann]

I attempted to use the above code but the labels are not showing. Oddly, if I replace the point.x.toString() passed to Text with something like 'Hello world' it shows. I pushed the code changes to the repo mentioned in the issue description, let me know if I'm doing something funky.

[PreethikaSelvam]

Hi @btrautmann,

We were able to replicate the reported issue using the attached repo you provided. We would like to let you know that the issue regarding ‘data label are not showing’ is occurring because you missed updating the fontSize in the Text widget inside the builder data label. We have shared a code snippet and for your reference.

`DoughnutSeries<PieChartData, String>(

      dataLabelMapper: (entry, _) => entry.id,

      dataLabelSettings: DataLabelSettings(

        margin: const EdgeInsets.all(4),

        isVisible: true,

        labelPosition: ChartDataLabelPosition.outside,

        borderRadius: 6,

        useSeriesColor: true,

        builder: (data, point, series, pointIndex, seriesIndex) {

          return Container(

            padding: const EdgeInsets.all(4),

            decoration: BoxDecoration(

              color: point.color ?? Colors.white,

              borderRadius: BorderRadius.circular(6),

            ),

            child: Text(

              point.x.toString(),

              style: const TextStyle(

                color: Colors.black,

                fontSize: 12,

              ),

            ),

          );

        },

      ),

`

Please let us know if you need any further assistance on this.

Regards,
Preethika Selvam.

[btrautmann]

@PreethikaSelvam I gave that a shot (see latest commit in the repo) but the result is the same unfortunately.

[btrautmann]

@PreethikaSelvam and word on this? Also:

We will check the flutter framework and update the solution for this case

Does this mean you opened an issue with flutter/flutter? Do you have a link?

[ghost]

Hi Team,

Query 1: I tried the solution mentioned (see latest commit in the repository), but unfortunately, the result remains the same.

We have checked your GitHub repository and found that it was working fine on our end. We have attached the screenshot and screenrecording below inside the Zip folder. However, we kindly request you to provide us with more detailed information along with screenshots or screen recordings. This will help us assist you more effectively.

Screenshot:

We also need the following details to check the mentioned issue:

1. Flutter SDK version.
2. Platform to run the sample.
3. Device details.

Query 2: I would like to confirm if you have opened an issue with flutter/flutter. If so, could you please provide us with the link?

For the mentioned issue regarding 'When using text painter with partially trimmed emoji, an Exception arises', we have created a GitHub issue and logged it in the Framework. For your reference, please find the attached GitHub link below. If you have any further inquiries, please feel free to contact us.

GitHub issue Link - flutter/flutter#142037

Regards,
Lokesh P.

[btrautmann]

Thanks for pointing me to the framework issue!

I've run the sample again and recorded a video of what I'm seeing. I'm not sure if this behavior is expected, but it's definitely related to screen size. The pie chart labels do not render at all as screen size decreases.

iPhone 13 mini and MacOS Desktop:

Screen.Recording.2024-01-23.at.11.37.21.mov

[PreethikaSelvam]

Hi @btrautmann,

We would like to let you know that the data label will be displayed based on the screen size. If the screen size is smaller, the data label will be hidden, and only the chart will be rendered. This is a current behavior.

However, currently we do not have support for ‘positioning the data label based on the available place’. Therefore, we have already considered your requirement as a new feature and logged feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link,

https://www.syncfusion.com/feedback/42028/improve-the-data-label-positioning-based-on-the-available-place

Regards,

Preethika Selvam.

[btrautmann]

Understood, and that makes sense. Thank you! I think we can leave this issue open as the root issue still exists and is being tracked by flutter/flutter#142037.

[btrautmann]

Following up on the above flutter/flutter issue that was closed: Do you all think you will be able to implement the truncation via graphemes and not manually trim the String?

[PreethikaSelvam]

Hi @btrautmann,

We would like to inform you that the data label builder will be hidden when it does not have enough space to render entirely. This is the current behavior. We understand your requirements and needs, so we have considered this a new feature and have logged a feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link: https://www.syncfusion.com/feedback/50685/provide-an-option-to-trim-the-data-label-builder-instead-of-hiding-it-based-on-the

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.

[btrautmann]

@PreethikaSelvam the original issue is the incorrect truncation of text containing emojis. You already opened an internal issue for the above problem RE: label layout and linked it in #1611 (comment). I think the issue you mentioned in #1611 (comment) is now redundant.

I have opened #1661 which addresses the root issue here. Note that the PR does not attempt to solve all instances of this problem, but rather serves to demonstrate a fix for the root cause. Please check it out and let me know if you have questions.

[PreethikaSelvam]

Hi @btrautmann,

We would like to let you know that we have logged two feature requests.

The first feature request (FR) is to reposition the data label based on the available space. In this case, the shift position will be modified based on the available size.

FR Link: https://www.syncfusion.com/feedback/42028/improve-the-data-label-positioning-based-on-the-available-place

The second FR is to restrict the data label builder size instead of hiding it based on the available size.

FR Link: https://www.syncfusion.com/feedback/50685/provide-an-option-to-trim-the-data-label-builder-instead-of-hiding-it-based-on-the

Therefore, the above two feature requests are correct and as mentioned in previous updates, they will be implemented in one of our upcoming releases.

Furthermore, we are pleased to hear that you have discovered the root cause here: #1661 will check this and consider all related features to determine the feasibility of incorporating your fix into our feature request implementation while implementing this feature: https://www.syncfusion.com/feedback/50685/provide-an-option-to-trim-the-data-label-builder-instead-of-hiding-it-based-on-the.

Regards,

Preethika Selvam.