We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Long legend title is not wrapped, causing cropped overflow on both sides

How can set text-overflow ellipsis, need help

Simulator Screen Shot - iPhone 14 - 2022-11-23 at 16-compressed.jpg


7 Replies 1 reply marked as answer

SK Sriram Kiran Senthilkumar Syncfusion Team November 24, 2022 09:35 PM

Hi Nguyen,


We are validating your query at our end and will update further details in one business day.


Regards,

Sriram Kiran



LP Lokesh Palani Syncfusion Team November 25, 2022 01:25 PM

Hi Nguyen,

Greetings from Syncfusion.

The requirement can be met by using the legendItemBuilder callback. In that, return a Text widget with overflow (TextOverflow.ellipsis)We have shared a sample for your reference below.


Code snippet:

    legend: Legend(

            isVisible: true,

            overflowMode: LegendItemOverflowMode.wrap,

            position: LegendPosition.bottom,

            legendItemBuilder: (legendText, series, point, seriesIndex) =>

                const Text('Fornix L3 DONG DIEN SENSOR 2(S2) Fornix L3 D3',

                    overflow: TextOverflow.ellipsis),

          ),


Output :


Regards,

Lokesh Palani.




LP Lokesh Palani Syncfusion Team November 25, 2022 01:37 PM

Here is the complete sample



Attachment: chart_179018_(2)_34d6c1f.zip


NG Nguyen replied to Lokesh Palani November 25, 2022 09:51 PM

when using legendItemBuilder, icon chart disapper, how can i get icon chart and show. Sorry my english is not good. Thank you




LP Lokesh Palani Syncfusion Team November 28, 2022 11:30 AM

Hi Nguyen,

We are validating your requirement at our end and will update further details in one business day.


Regards,

Lokesh Palani



NG Nguyen replied to Lokesh Palani November 28, 2022 08:18 PM

Thank you



LP Lokesh Palani Syncfusion Team November 28, 2022 11:14 PM

Hi Nguyen,


The legendItemBuilder callback is used to customize the legend default appearance. So, only the default legend icon will not display for your case. However, you can achieve your requirement by wrapping the Icon and Text widgets in a Row widget as per the following code snippet, and we have shared a sample for your reference below.


Code snippet;


 legend: Legend(

            isVisible: true,

            overflowMode: LegendItemOverflowMode.wrap,

            position: LegendPosition.bottom,

            legendItemBuilder: (legendText, series, point, seriesIndex) => Row(

              children: const [

                Icon(Icons.area_chart),

                Flexible(

                  child: Text('Fornix L3 DONG DIEN SENSOR 2(S2) Fornix L3 D3',

                      overflow: TextOverflow.ellipsis),

                ),

              ],

            ),

          ),

 


Output ;

Regards,

Lokesh Palani.


Attachment: chart_179018_7f86135.zip

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon