How to toggle linked legends

[Shigeyuki Ebe]

Hello.

Is it possible to update the visibility of the line series without tapping?

In my case, when I tap a legend, it will be treated as if I tapped another legend you specified.

I've tried using setState() but it's not working.

Here is small sample code.

This code expects the last item to be hidden at the same time when the legend is tapped.But it doesn't work that way

class LineData {

  final int x;
  final int y;
  LineData(this.x, this.y);
}


class LineSeriesData {
  final String name;
  final List data;


  LineSeriesData(this.name, this.data);
}


class LineChartSample extends StatefulWidget {
  const LineChartSample({Key? key}) : super(key: key);


  @override
  State createState() => _LineChartSampleState();
}


class _LineChartSampleState extends State {
  List data = List.generate(
      4,
      (i) =>
          LineSeriesData('Series $i', List.generate(10, (j) => LineData(j + 1, j * 10 * (i + 1)))));
  List isSelected = List.generate(4, (i) => true);
  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      legend: Legend(
        isVisible: true,
      ),
      onLegendTapped: (LegendTapArgs args) {
        isSelected.last = false;
        setState(() {});
      },
      series: data
          .map((d) => LineSeries(
                isVisible: isSelected[data.indexWhere((e) => e.name == d.name)],
                name: d.name,
                dataSource: d.data,
                xValueMapper: (LineData ld, i) => ld.x,
                yValueMapper: (LineData ld, i) => ld.y,
              ))
          .toList(),
    );
  }
}

So How should i implement it for such cases?

Thanks.

[Yuvaraj Gajaraj]

Hi Shigeyuki,

Greetings from Syncfusion. In your sample, you have set the series visibility when toggling the legend. But, in our chart, we give priority to the legend toggle so, that is why the series did not get hidden. So, we suggest you use the onPointTap callback and markerSettings property. With the help of this, you can hide the series by tapping the series marker and setting the false to the last series in the onPointTap callback. We have attached the code snippet below for your reference.

Code snippet:

LineSeries<LineData, num>(

  isVisible: isSelected[index],

  onPointTap: (args){

    isSelected.last = false;

  },

  // Other required properties

  markerSettings: MarkerSettings(isVisible: true)

)

Regards,

Yuvaraj.

[Shigeyuki Ebe]

Thank you for your answer.

I have checked the code you provided.

But what I want to accomplish is to have a single tap on the legend toggle other legends at the same time. (and of course its series data).

It's unable to accomplish this with the method you suggested.

Is it possible to achieve this requirement with a legend tap callback?

[Yuvaraj Gajaraj]

Hi Shigeyuki,

No, with the legend tapped event, you can fetch the point, series index, and the respective series related information alone. So, we suggest you the onPointTap callback to hide the currently tapped series and last series instead of setting the false in onLegendTapped callback. You can set the visibility of the series in onPointTap callback with the help of seriesIndex from the callback argument. We have attached the code snippet below for your reference.

Code snippet:

LineSeries(

  isVisible: isSelected[index],

  onPointTap: (args) {

    isSelected[args.seriesIndex!] = false;

    isSelected.last = false;

    setState(() {});

  },

  // Other required properties

  markerSettings: MarkerSettings(isVisible: true)

),

Regards,

Yuvaraj.