Custom Legend with checkbox

[Jaehwi Kim]

Hi, 

I'm working with SfCartesianChart.

I am wondering if I could build my own custom checkbox legend using legend builder so that it would behave same as the default legend - when the user clicks on one of the legend element, the checkbox would be unchecked (it would not be hidden) and keep the functionality. 

Here is an sample image that I would like to apply:

As you can see on the image bottom, there are 6 different legends that have checkbox so that when the user clicks on one of it, the checkbox would be unchecked with the corresponding data in the chart would

Thank you.

[Sriram Kiran Senthilkumar]

Hi Jaehwi Kim, 

  

Greetings from Syncfusion. We have analyzed your scenario at our end, and we have created a simple workaround sample with available support in our chart widget to render the chart series legend with checkbox along with toggling functionality on series toggle using the legend builder feature available in our chart widget. We have also attached the sample below for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/169508/ze/f169508_legendbuilder_checkbox-702326682 

  

Please check with the sample and revert us if you require further assistance. 

  

Regards, 

Sriram Kiran 

[Jaehwi Kim]

Thanks.

However, from the sample above, it seems like when I uncheck multiple series the chart still renders unchecked series. Also, re-rendering the whole chart whenever the legend is pressed seems bit awkward compared to the built-in toggle of legend which just hides the toggled series instead of re-rendering the whole chart.

Here is the behavior the above sample shows up when I unchecked multiple legend.

Some other workaround I have been thinking of are:

• Maybe toggle the isVisible property of series within the legendItemBuilder property (Did not work)

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

    Checkbox(

        onChanged: () { series.isVisible = !series.isVisible}     // something like this

    ),

}

• There is a way that I could determine if the legend is toggled off or not within the legendItemBuilder, and use checked checkbox Icon for toggled on legend, and unchecked checkbox for toggled off legend.

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

    // a property from series that could determine if the matching legend is clicked or not

}

• Seems like there is a property onLegendTapped for SfCartesianChart widget - maybe use this to customize the legend and hide/show the series.

• and lastly, there is a property selectedImage & unselectedImage so that different images show up whenever a legend is toggled off & on

Legend(

  isVisible: true,

  selectedImage: AssetImage('checkedIcon.png'),

  unselectedImage: AssetImage('uncheckedIcon.png'),

)

Thank You.

[Yuvaraj Gajaraj]

Hi Jaehwi Kim, 

 

Thanks for the revert. We have analyzed your scenario at our end, and we would like to let you know that for our legend builder, we wrap the incoming widget inside a GestureDetector and if any clickable widget such as check box, radio button used for custom legend then that widget’s gestures will only gets triggered and blocks the parent gesture detector from detecting those gestures. This is the current default behavior in flutter framework. So, due to this we are unable to provide suitable solution for your case. We have also attached the stack overflow link regarding this case. 

 

Link: https://stackoverflow.com/questions/54505219/gesturedetector-and-radio?rq=1 

 

Once the flutter team provides support for resolving this case, we will make necessary changes at our end to provide support. 

 

Please revert us if you have further concerns. 

 

Regards, 

Yuvaraj.