Selection

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

@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,
                                selectionSettings: SelectionSettings(
                                    // Enables the selection
                                    enable: true
                                )
                            )
                        ]
                    )
                )
            )
        );  
    }

Customizing the segments

You can customize the segments using the below 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 selected segment.

dart

@override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        series: <CartesianSeries>[
                            ColumnSeries<ChartData, double>(
                                selectionSettings: SelectionSettings(
                                    enable: true,
                                    selectedColor: Colors.red,
                                    unselectedColor: Colors.grey
                                )
                            )
                        ]
                    )
                )
            )
        );
    }

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

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

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: SfCartesianChart(
                        initialSelectedDataIndexes: <IndexesModel>[IndexesModel(1, 0)]
                    )
                )
            )
        );
    }

Also refer selection event for customizing the selection further.