How to create clickable pie chart in Flutter using circular charts widget (SfCircularChart) ?

Description

This article explains how to create the clickable Pie chart in Flutter using the SfCircularChart widget.

Solution

Circular chart provides the pie chart support. You can customize the chart with color, tooltip, data label, etc. To know more about our charts, find the user guide. In this kb, you see about how to select, explode, and drill-down by tapping a pie chart.

Selection and explode

Follow these steps to render the clickable pie chart with selection and explode features using the SfCircularChart widget:

Step 1: First, declare and initialize the chartData with the required data source.

//Initialize the data source
List<_SalesData> chartData = [
  _SalesData('Jan', 35),
  _SalesData('Feb', 28),
  _SalesData('Mar', 34),
  _SalesData('Apr', 32),
  _SalesData('May', 40)
 ];

Step 2: Then, initialize the SfCircularChart widget with required properties. Here, we have initialized the pie series and bind the dataSource.

SfCircularChart(
 series: <PieSeries<_SalestData, String>>[
  PieSeries<_SalesData, String>(
   // Assign the chartData to the data source.
  dataSource: chartData,
  xValueMapper: (_SalesData sales, _) => sales.year,
  yValueMapper: (_SalesData sales, _) => sales.sales,
  ),
 ],
),

Step 3: Also, initialize the selectionBehavior property to enable the selection.

SfCircularChart(
 series: <PieSeries<_SalestData, String>>[
  PieSeries<_SalesData, String>(
    //Initialize the selection
    selectionBehavior: SelectionBehavior(enable: true),
  ),
 ],
),

Step 4: Finally, enable the explode property to explode on tapping a point.

SfCircularChart(
 series: <PieSeries<_SalestData, String>>[
  PieSeries<_SalesData, String>(
    //Enabling the explode property to explode the tapped point.
    explode: true,
  ),
 ],
),

Screenshot

View the sample in GitHub.

DrillDown

Drill-down functionality in chart is used to explore the data in more depth to reveal additional information. Drill-down feature can be easily implemented using the Syncfusion® Flutter chart package. The following KB explains how to achieve the drill-down feature.

https://support.syncfusion.com/kb/article/10175/how-to-drilldown-with-syncfusion-flutter-chart-widget-sfcircularchart