How to show the tapped point value at the center of the doughnut chart (SfCircularChart)?
In this article we explain how to show the tapped point value in the center of the doughnut chart using the Flutter circular chart.
The SfCircularChart widget supports for annotations which is used to display the custom widget in the circular chart. In default the annotation gets positioned at center of the circular chart and you can get the tapped point information using the onPointTap callback. Follow the below steps to show tapped point information.
Step 1: Initialize the data source for chart and tappedValue variable with empty string.
late List<SeriesData> chartData;
String tappedValue = '';
@override
void initState() {
chartData = <SeriesData>[
SeriesData('Mon', 10),
SeriesData('Tue', 20),
SeriesData('Wed', 30),
SeriesData('Thus', 40),
SeriesData('Fri', 50),
SeriesData('Sat', 60),
SeriesData('Sun', 70),
];
super.initState();
}
class SeriesData {
SeriesData(this.x, this.y);
final String x;
final num y;
}
Step 2: Initialize the SfCircularChart widget with DoughnutSeries and bind the data source to the series.
SfCircularChart( series: <CircularSeries<SeriesData, String>>[ DoughnutSeries( dataSource: chartData, xValueMapper: (SeriesData data, _) => data.x, yValueMapper: (SeriesData data, _) => data.y) ], )
Step 3: Then assign the annotations property with the text widget, for that text widget assign the tappedValue variable. Then using the onPointTap callback get the tapped point information, assign it to the tappedValue variable and call the setState to reflect the changes in the chart.
SfCircularChart(
annotations: [
CircularChartAnnotation(
widget: Text(
tappedValue,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
))
],
series: <CircularSeries<SeriesData, String>>[
DoughnutSeries(
onPointTap: (pointInteractionDetails) {
tappedValue = pointInteractionDetails
.dataPoints![pointInteractionDetails.pointIndex!].y
.toString();
setState(() {});
},
],
)
Thus, the showing the tapped point value at the center of the doughnut chart is achieved by the help of annotations property and onPointTap callback.
