Selection in Flutter Circular Charts (SfCircularChart)

22 Apr 20217 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.

  • dart
  • 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.

  • dart
  • 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.

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

    Multi selection

    Also refer selection event for customizing the selection further.

    See Also