Selection in Flutter Circular Charts (SfCircularChart)

11 Apr 202210 minutes to read

The selection feature in chart let you to select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series.

late SelectionBehavior _selectionBehavior;

    @override
    void initState(){
        _selectionBehavior = SelectionBehavior(
            // Enables the selection
            enable: true);
        super.initState();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCircularChart(
                        series: <CircularSeries>[
                            PieSeries<ChartData, String>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y,
                                selectionBehavior: _selectionBehavior
                            )
                        ]
                    )
                )
            )
        );  
    }

Selection

Customizing the segments

You can customize the segments using the below properties.

late SelectionBehavior _selectionBehavior;

    @override
    void initState(){
        _selectionBehavior = SelectionBehavior(
             enable: true,
             selectedColor: Colors.red,
            unselectedColor: Colors.grey);
        super.initState();
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCircularChart(
                        series: <CircularSeries>[
                            PieSeries<ChartData, double>(
                                selectionBehavior: _selectionBehavior
                            )
                        ]
                    )
                )
            )
        );
    }

Customizing segments

Multi-selection

Multiple selection can be enabled using the enableMultiSelection property of chart.

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCircularChart(
                        // Enables multiple selection
                        enableMultiSelection: true
                    )
                )
            )
        );
    }

Multi selection

Toggle selection

You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the toggleSelection property true or false. If set to true, deselection will be performed else the point will not get deselected.
This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes.
Defaults to true.

late SelectionBehavior _selectionBehavior;

    @override
    void initState(){
      _selectionBehavior =  SelectionBehavior(
                          enable: true,
                          toggleSelection: false,
                        );
      super.initState(); 
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
            child: Container(
                child: SfCircularChart(
                    series: <CircularSeries<ChartData, String>>[
                       PieSeries<ChartData, String>(
                        dataSource: chartData1,
                        xValueMapper: (ChartData data, _) => data.x,
                        yValueMapper: (ChartData data, _) => data.y,
                        selectionBehavior: _selectionBehavior
                        )
                    ]
                )
            )
         )
      );
   }

Toggle selection

Also refer selection event for customizing the selection further.

See Also