Selection in Cartesian charts

9 Apr 2021 / 13 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
                                )
                            ]
                        )
                    )
                )
            );  
        }

    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
                                )
                            ]
                        )
                    )
                )
            );
        }

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

  • 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
                                )
                            ]
                        )
                    )
                )
            );
        }

    Initial selection

    Also refer selection event for customizing the selection further.

    See Also