Selection in SfPyramid Charts

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: SfPyramidChart(
                series: PyramidSeries<SalesData, String>(
                    dataSource: chartData,
                    xValueMapper: (SalesData sales, _) =>   sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    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: SfPyramidChart(
                series: PyramidSeries<SalesData, String>(
                    dataSource: chartData,
                    xValueMapper: (SalesData sales, _) =>   sales.year,
                    yValueMapper: (SalesData sales, _) => sales.sales,
                    selectionSettings: SelectionSettings(
                    // Enables the selection
                    enable: true,
                    selectedColor: Colors.red,
                    unselectedColor: Colors.grey,
                    )
                  )
              )
            )
          )
        );
      }

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

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

Also refer selection event for customizing the selection further.