Selection in Flutter Cartesian Charts (SfCartesianChart)

13 Aug 202117 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: SfCartesianChart(
                            series: <CartesianSeries>[
                                ColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    selectionBehavior: _selectionBehavior
                                )
                            ]
                        )
                    )
                )
            );  
        }
    
        class ChartData {
            ChartData(this.x, this.y);
            final double x;
            final double? y;
          }

    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: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <CartesianSeries>[
                                ColumnSeries<ChartData, String>(
                                    selectionBehavior: _selectionBehavior
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y);
            final String x;
            final double? y;
          }

    Customizing segments

    Selection modes

    The selection features allows you to select segments in following modes using selectionType property of chart.

    • Point - selects the individual data point.
    • Series - selects the entire series.
    • Cluster - selects the cluster of points of different series i.e selects the points with same index in each series.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            // Mode of selection
                            selectionType: SelectionType.cluster
                        )
                    )
                )
            );
        }

    Cluster mode

    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: SfCartesianChart(
                            // Enables multiple selection
                            enableMultiSelection: true
                        )
                    )
                )
            );
        }

    Multi selection

    Selection on initial rendering

    You can select a point or series programmatically on a chart using initialSelectedDataIndexes property of the CartesianSeries.

  • 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: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <CartesianSeries>[
                                ColumnSeries<ChartData, String>(
                                    // Initially selected the data at point index 1.
                                    initialSelectedDataIndexes: <int>[1],
                                    dataSource: chartData1,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    selectionBehavior: _selectionBehavior
                                ),
                                ColumnSeries<ChartData, String>(
                                    dataSource: chartData2,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    selectionBehavior: _selectionBehavior
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y);
            final String x;
            final double? y;
          }

    Initial 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.

  • dart
  • 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: SfCartesianChart(
                            series: <ColumnSeries<ChartData, String>>[
                              ColumnSeries<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

    NOTE

    chartData in the above code snippets is a class type list and holds the data for binding to the chart series. Refer Bind data source topic for more details.