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

Question

How can set text-overflow ellipsis, need help

Lokesh Palani · Accepted Answer

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

Sriram Kiran Senthilkumar · Answer

Hi Nguyen,We are validating your query at our end and will update further details in one business day.Regards,Sriram Kiran

Lokesh Palani · Answer

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.

Lokesh Palani · Answer

Here is the complete sampleAttachment: chart_179018_(2)_34d6c1f.zip

Nguyen · Answer

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

Lokesh Palani · Answer

Hi Nguyen,We are validating your requirement at our end and will update further details in one business day.Regards,Lokesh Palani

Nguyen · Answer

Thank you