Selection in Flutter Cartesian Charts (SfCartesianChart)

11 Apr 202223 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) {
        final List<ChartData> chartData = [
            ChartData('USA', 6),
            ChartData('China', 11),
            ChartData('UK', 9),
            ChartData('Japan', 14),
            ChartData('France', 10),
        ];
        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.

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

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('USA', 6),
            ChartData('China', 11),
            ChartData('UK', 9),
            ChartData('Japan', 14),
            ChartData('France', 10),
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: CategoryAxis(),
                        series: <CartesianSeries>[
                            series: <ChartSeries<ChartData, String>>[
                        ColumnSeries<ChartData, String>(
                            dataSource: chartData,
                            selectionBehavior: _selectionBehavior
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y)
                        ]
                    )
                )
            )
        );
    }

    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.

late SelectionBehavior _selectionBehavior;

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

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
        ChartData('USA', 6, 8),
        ChartData('China', 11, 7),
        ChartData('UK', 9, 10),
        ChartData('Japan', 14, 8),
        ChartData('France', 10, 12),
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
        // Mode of selection
        selectionType: SelectionType.cluster,
        series: <ChartSeries<ChartData, String>>[
            ColumnSeries<ChartData, String>(
                dataSource: chartData,
                selectionBehavior: _selectionBehavior,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y),
            ColumnSeries<ChartData, String>(
                dataSource: chartData,
                selectionBehavior: _selectionBehavior,
                xValueMapper: (ChartData data, _) => data.x,
                yValueMapper: (ChartData data, _) => data.y1)],
                 )
              )
           )
       );
    }

    class ChartData {
        ChartData(this.x, this.y, this.y1);
        final String x;
        final double y;
        final double y1;
    }

Cluster mode

Multi-selection

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

late SelectionBehavior _selectionBehavior;

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

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
        ChartData('USA', 6),
        ChartData('China', 11),
        ChartData('UK', 9),
        ChartData('Japan', 14),
        ChartData('France', 10),
        ];

    return Scaffold(
      body: Center(
        child: Container(
          child: SfCartesianChart(
            // Enables multiple selection
            enableMultiSelection: true,
            series: <ChartSeries<ChartData, String>>[
              ColumnSeries<ChartData, String>(
                  dataSource: chartData,
                  selectionBehavior: _selectionBehavior,
                  xValueMapper: (ChartData data, _) => data.x,
                  yValueMapper: (ChartData data, _) => data.y)],
                )
             )
          )
      );
    }

Multi selection

Selection on initial rendering

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

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

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('USA', 6, 8),
            ChartData('China', 11, 7),
            ChartData('UK', 9, 10),
            ChartData('Japan', 14, 8),
            ChartData('France', 10, 12),
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        // Mode of selection
                        selectionType: SelectionType.cluster,
                        series: <ChartSeries<ChartData, String>>[
                        ColumnSeries<ChartData, String>(
                            dataSource: chartData,
                            initialSelectedDataIndexes: <int>[1],
                            selectionBehavior: _selectionBehavior
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y),
                        ColumnSeries<ChartData, String>(
                            dataSource: chartData,
                            selectionBehavior: _selectionBehavior
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y1),
                        ],
                    )
                )
            )
        );
    }
    class ChartData {
        ChartData(this.x, this.y, this.y1);
        final String x;
        final double y;
        final double y1;
    }

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.

late selectionBehavior _selectionBehavior;

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

    @override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData('CHN', 52),
            ChartData('USA', 69),
            ChartData('IDN', 68),
            ChartData('JAP', 61),
            ChartData('BRA', 69),
        ];
        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.