Selection in Flutter Pyramid Chart (SfPyramidChart)

22 Apr 202110 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: SfPyramidChart(
                  series: PyramidSeries<SalesData, String>(
                      dataSource: chartData,
                      xValueMapper: (SalesData sales, _) =>   sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      selectionBehavior: _selectionBehavior
                    )
                )
              )
            )
          );
        }

    Customizing the segments

    You can customize the segments using the below properties.

  • dart
  • late SelectionBehavior _selectionBehavior;
    
        @override
        void initState(){
          _selectionBehavior = SelectionBehavior(
                        // Enables the selection
                        enable: true,
                        selectedColor: Colors.red,
                        unselectedColor: Colors.grey,
                        );
          super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: Center(
              child: Container(
                child: SfPyramidChart(
                  series: PyramidSeries<SalesData, String>(
                      dataSource: chartData,
                      xValueMapper: (SalesData sales, _) =>   sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      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: SfPyramidChart(
                            // 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
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfPyramidChart(
                            initialSelectedDataIndexes: [2, 0]
                        )
                    )
                )
            );
        }

    Initial selection

    Also refer selection event for customizing the selection further.

    Methods in SelectionBehavior

    SelectDataPoints method in SelectionBehavior

    The selectDataPoints method is used to select the data point programmatically. The required arguments are listed below.

    • pointIndex - specifies the point index value.
    • seriesIndex - specifies the series index value and this is an optional parameter. By default it will be considered as 0.

    NOTE

    The enableMultiSelection is also applicable for this but, it is based on the API values specified in the chart.

  • dart
  • late SfPyramidChart chart;
        late SelectionBehavior _selectionBehavior;
    
        @override
        void initState(){
          _selectionBehavior = SelectionBehavior(enable: true);
        super.initState();
        }
    
        @override
        Widget build(BuildContext context) {
        
          final List<ChartData> chartData = [
            ChartData(10, 17),
            ChartData(20, 34)
            // Add the required data
          ];
    
          selection = ;
          
          chart = SfPyramidChart(
            series: PyramidSeries<ChartData, double>(
                  dataSource: chartData,
                  xValueMapper: (ChartData data, _) => data.x,
                  yValueMapper: (ChartData data, _) => data.y,
                  selectionBehavior: _selectionBehavior
              )
          );
          
          return Scaffold(
            body: Center(
              child: Column(
                children: <Widget>[
                  FlatButton(
                    child: Text('Select'),
                    onPressed: select
                  ),
                  Container(child: chart)
                ]
              )
            )
          );
        }
    
        void select() {
            _selectionBehavior.selectDataPoints(1, 0);
        }