Articles in this section
Category / Section

How to drilldown with Syncfusion Flutter Chart widget (SfCircularChart) ?

4 mins read

In this article, we described how to drilldown with Syncfusion Flutter chart widget.

 

Our Syncfusion Flutter chart widgets supports drilldown functionality. Drilldown functionality in chart is used to explore the data in more depth to reveal additional details. Drilldown feature can easily be implemented using the Syncfusion Flutter chart package and it is supported in all chart types including Cartesian, Circular, Funnel, Pyramid etc. You can implement drilldown functionality with the help of onPointTapped callback event available in the chart.

Refer the following instructions to implement drilldown functionality using the onPointTapped callback event.

Implementation of drilldown functionality in the chart

 

Step 1: Initialize a dynamic variable for storing the chart widget and also initialize a Boolean variable for checking, if the chart is drilled down with default value as false.

late dynamic chart;
bool isDrilledChart = false;
late TooltipBehavior _tooltipBehavior;
 
@override
void initState(){
  _tooltipBehavior = TooltipBehavior(enable: false);
  super.initState();
}

 

Initialize the default chart called Pie chart in the getDefaultChart() method, in which the drill down can be done and also isDrilledChart variable is set as false.

void getDefaultChart() {
    isDrilledChart = false;
    chart = SfCircularChart(
        title: ChartTitle(text: 'Sales Analysis'),
        legend: Legend(isVisible: true),
        tooltipBehavior: _tooltipBehavior,
        series: <CircularSeries<SalesData, String>>[
          PieSeries<SalesData, String>(
              animationDuration: 0,
              dataSource: chartData,
              xValueMapper: (SalesData sales, _) => sales.year,
              yValueMapper: (SalesData sales, _) => sales.sales)
        ]);
  }

 

Step 2: Define another method called getDrilledChart(), in which the drilled down chart(with randomly generated datapoints) will be initialized to the dynamic chart widget variable according to the default chart index values inside the setState method for rebuild when the chart is drilldown.

void getDrilledChart(num index) {
    isDrilledChart = true;
    if (index % 2 == 0) {
      setState(() {
        chart = SfCartesianChart(
          primaryXAxis: CategoryAxis(),
          series: <ColumnSeries<SalesData, String>>[
              ColumnSeries<SalesData, String>(
                  dataSource: <SalesData>[
                    SalesData('Peter', getRandomInt(15, 23)),
                    SalesData('Mark', getRandomInt(4, 20)),
                    SalesData('Lucifer', getRandomInt(10, 35)),
                    SalesData('Jack', getRandomInt(10, 50)),
                    SalesData('jacob', getRandomInt(6, 43))
                  ],
                  xValueMapper: (SalesData sales, _) => sales.year,
                  yValueMapper: (SalesData sales, _) => sales.sales,
                  // Enable data label
                  dataLabelSettings: DataLabelSettings(isVisible: true))
            ]
        );
      });
    } else {
      setState(() {
        chart = SfCartesianChart(
          primaryXAxis: CategoryAxis(),
          series: <ColumnSeries<SalesData, String>>[
              ColumnSeries<SalesData, String>(
                  dataSource: <SalesData>[
                    SalesData('Peter', getRandomInt(15, 23)),
                    SalesData('Mark', getRandomInt(4, 20)),
                    SalesData('Lucifer', getRandomInt(10, 35)),
                    SalesData('Jack', getRandomInt(10, 50)),
                    SalesData('jacob', getRandomInt(6, 43))
                  ],
                  xValueMapper: (SalesData sales, _) => sales.year,
                  yValueMapper: (SalesData sales, _) => sales.sales,
                  // Enable data label
                  dataLabelSettings: DataLabelSettings(isVisible: true))
            ]
        );
      });
    }
  }

 

Step 3: Inside the default chart method, call the getDrilledChart method inside the charts onPointTapped callback event with the tapped pointIndex argument value as a parameter.

void getDefaultChart() {
    chart = SfCircularChart(
        onPointTapped: (PointTapArgs args) {
          getDrilledChart(args.pointIndex);
        },
        // Required properties
    );
}

 

Step 4: In the build method, define a column widget with two children widgets. First child is a visibility widget with a back-arrow icon button for navigating from drilled chart to default chart, which will be handled in their onPressed method by calling the getDefaultChart method. Second widget is container with dynamic chart widget variable as their child.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Drilldown Pie'),
        ),
        body: Column(
          children: <Widget>[
            Visibility(
              visible: isDrilledChart,
              child: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: () {
                  setState(() {
                    getDefaultChart();
                  });
                },
              ),
            ),
            Container(
              height: 450,
              child: chart
            ),
          ],
        ));
  }

 

Thus, the drilldown functionality is implemented using the Syncfusion Flutter chart package.

 

Screenshots

 

Drilldown Functionality

 

A screenshot of a cell phone

Description automatically generated

 

For further reference on onPointTapped event, find the user guide here.

 

View the sample in GitHub

 

Conclusion

I hope you enjoyed learning about how to drilldown with Syncfsusion Flutter Chart widget.

You can refer to our Flutter Circular Chart feature tour page to know about its other groundbreaking feature representations documentation
and how to quickly get started for configuration specifications.  You can also explore our Flutter Circular Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial  to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied