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

how to get the default legend item icon within legendItemBuilder?

to make my legend in proper style (label and value should be shown in a table like way) I need to use the legendItemBuilder.


Getting the values is simple, but how do I get the default icon? Means the icon that is used in legend without the custom legendItemBuilder.




4 Replies

YG Yuvaraj Gajaraj Syncfusion Team February 13, 2023 03:07 PM UTC


Hi Matthias,


Currently, we are checking the feasible workaround for your requirement and will update the complete details on February 14, 2023. We appreciate your patience until then.


Regards,

Yuvaraj.



NR Natrayan Ramalingam Syncfusion Team February 14, 2023 01:00 PM UTC

Hi Matthias,


The requirement ‘How to get the default legend item icon within legendItemBuilder’’ can be achieved by using container, icon, and text widget wrapping it in row widget. You can also change the color of the legend text by changing the color in the line series color property. Please refer the following code snippet.


Code snippet:

legend: Legend(

          isVisible: true,

          legendItemBuilder: (legendText, series, point, seriesIndex) {

            return Container(

              width: 80,

              height: 50,

              child: Row(

                children: [

                  // Using the Icon widget you can customize the legend icons instead container.

                  Container(

                    width: 10,

                    height: 2,

                    color: series.color,

                  ),

                  const SizedBox(

                    width: 5,

                  ),

                  Text(legendText),

                ],

              ),

           );

        },

),

 


Screenshot:

Chart, line chart

Description automatically generated


You can refer the below attached sample along with user guide documentation for more details about legend widget.

https://help.syncfusion.com/flutter/cartesian-charts/legend



Regards,

Natrayan


Attachment: f180473_67518fa2.zip


MK Matthias Koch February 23, 2023 06:07 AM UTC

Hi,


that's not what I mean, 
I mean the icon for an area chart or a doughnut etc. 


best regards



YG Yuvaraj Gajaraj Syncfusion Team February 24, 2023 01:01 PM UTC

Hi Matthias,


Sorry for the inconvenience, we don't have support for showing a default legend icon in a LegendItemBuilder. If you want to change the text alone in the legend, we recommend you the onLegendItemRenderer callback to modify the text field in the legend. We have shared the code snippet and UG documentation below for your reference.


Code snippet:

SfCartesianChart(
onLegendItemRender: (legendRenderArgs) {
legendRenderArgs.text = 'Custom text value';
},
)


If you want to achieve your requirement in builder legend alone means, please add a custom painter inside the legend builder and render the icon using a custom painter based on your series collection. 


Regards,

Yuvaraj.


Loader.
Up arrow icon