How to drilldown with Syncfusion Flutter Chart widget (SfCircularChart) ?
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
For further reference on onPointTapped event, find the user guide here.
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
