Selection in Flutter Funnel Chart

6 Aug 202612 minutes to read

The selection feature in the chart lets you select a segment in a series or the series itself. This feature allows you to select either individual segments or clusters 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: SfFunnelChart(
              series: FunnelSeries<ChartData, String>(
                  dataSource: chartData,
                  xValueMapper: (ChartData data, _) =>   data.x,
                  yValueMapper: (ChartData data, _) => data.y,
                  selectionBehavior: _selectionBehavior
                )
            )
          )
        )
      );
    }

Customizing the segments

You can customize the segments using the following properties.

• selectedColor - used to change the background color of selected segment.
• unselectedColor - used to change the background color of unselected segment.
• selectedBorderColor - used to change the stroke color of the selected segment.
• selectedBorderWidth - used to change the stroke width of the selected segment.
• unselectedBorderColor - used to change the stroke color of the unselected segment.
• unselectedBorderWidth - used to change the stroke width of the unselected segment.
• selectedOpacity - used to control the transparency of the selected segment.
• unselectedOpacity - used to control the transparency of the unselected segment.

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: SfFunnelChart(
              series: FunnelSeries<ChartData, String>(
                  dataSource: chartData,
                  xValueMapper: (ChartData data, _) =>   data.x,
                  yValueMapper: (ChartData data, _) => data.y,
                  selectionBehavior: _selectionBehavior
                )
            )
          )
        )
      );
    }

Multi-selection

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

DART

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

Selection on initial rendering

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

DART

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfFunnelChart(
                        initialSelectedDataIndexes: [1, 0]
                    )
                )
            )
        );
    }

Toggle selection

You can decide whether to deselect the selected data point or series, or keep it selected when it is interacted with again, by setting the toggleSelection property to true or false. If set to true, deselection will be performed; otherwise, the point will not be deselected.
This works even while calling public methods, in various selection modes, with multi-selection, and during 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: SfFunnelChart(
              series: FunnelSeries<ChartData, String>(
              dataSource: chartData1,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
              selectionBehavior: _selectionBehavior)
        ))));
    }

Also refer to the selection event for further selection customization.

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 - index of the point which needs to be selected.
• seriesIndex - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0.

Note: The enableMultiSelection property is also applicable here, but it depends on the API values specified in the chart.

DART

late SfFunnelChart 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
    ];
    chart = SfFunnelChart(
      series: FunnelSeries<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);
    }