How to show the tapped point value at the center of the doughnut chart?

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 annotations which can be used to display custom widgets within the circular chart. By default, annotations are positioned at the center of the circular chart. You can retrieve tapped point information using the onPointTap callback. Follow these 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, showing the tapped point value at the center of the doughnut chart is achieved using the annotations property and onPointTap callback.

Conclusion

I hope you enjoyed learning about how to show the tapped point value at the centre of the doughnut chart.

You can refer to our Flutter Circular Chart feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

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!