How to Enable Smart Data Labels in Flutter CircularCharts?

In this article, we explain how to enhance the readability of data labels in Flutter SfCircularChart when data labels overlap. This is done by positioning the data labels outside the pie slices and using curved connector lines. We also cover how to configure labelIntersectAction to avoid label collisions. Additionally, key settings like labelPosition and ConnectorLineSettings will be explored to help you better control how labels are displayed in circular chart.

The following steps explain how to enable the smart data labels in SfCircularChart.

Step 1: Initialize the list _electronicProducts which stores the data source. Then create the SfCircularChart widget with the PieSeries and assign the _electronicProducts to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively.

late List<_ElectronicData> _electronicProducts;
final LabelIntersectAction _labelIntersectAction = LabelIntersectAction.shift;

 @override
 void initState() {
   _electronicProducts = <_ElectronicData>[
     _ElectronicData('Smartphones', 150),
     _ElectronicData('Laptops', 145),
     _ElectronicData('Tablets', 140),
     _ElectronicData('Smartwatches', 138),
     _ElectronicData('Headphones', 135),
     _ElectronicData('Smart Home Devices', 133),
     _ElectronicData('TVs', 130),
     _ElectronicData('Gaming Consoles', 128),
     _ElectronicData('Monitors', 125),
     _ElectronicData('Printers', 123),
     _ElectronicData('Cameras', 120),
     _ElectronicData('Routers', 118),
     _ElectronicData('External Storage', 115),
     _ElectronicData('Projectors', 113),
     _ElectronicData('VR Headsets', 110),
     _ElectronicData('Microphones', 108),
     _ElectronicData('Webcams', 105),
     _ElectronicData('Smart Glasses', 103),
     _ElectronicData('Fitness Trackers', 100),
     _ElectronicData('Bluetooth Speakers', 98),
     _ElectronicData('E-readers', 95),
     _ElectronicData('Network Switches', 93),
     _ElectronicData('Docking Stations', 90),
     _ElectronicData('Power Banks', 88),
     _ElectronicData('Smart Thermostats', 85),
     _ElectronicData('Surge Protectors', 83),
     _ElectronicData('Home Security Cameras', 80),
     _ElectronicData('Smart Plugs', 78),
     _ElectronicData('Electronic Keyboards', 75),
     _ElectronicData('Digital Picture Frames', 73),
     _ElectronicData('Satellite Radios', 70),
     _ElectronicData('Car Dash Cameras', 68),
     _ElectronicData('Digital Pianos', 65),
     _ElectronicData('Smart Doorbells', 63),
     _ElectronicData('Weather Stations', 60),
     _ElectronicData('Robotic Vacuums', 58),
     _ElectronicData('Home Audio Systems', 55),
   ];
   super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: SfCircularChart(
       series: <CircularSeries>[
         PieSeries<_ElectronicData, String>(
           dataSource: _electronicProducts,
           xValueMapper: (_ElectronicData data, int index) => data.x,
           yValueMapper: (_ElectronicData data, int index) => data.y,
         ),
       ],
     ),
   );
 }
}

class _ElectronicData{
 _ElectronicData(this.x, this.y);
 String x;
 double y;
}

Step 2 : Set DataLabelSettings within the PieSeries to enhance the chart’s readability. Make the data labels visible by setting IsVisible property to true. Position the data labels outside the pie slices using labelPosition set to ChartDataLabelposition.outside . Use ConnectorLineSettings to connect the data labels to their slices with curved lines that are 20% of the radius, making the chart visually appealing.

series: <CircularSeries>[
  PieSeries<_ElectronicData, String>(
    ...
    dataLabelSettings: const DataLabelSettings(
      isVisible: true,
      labelPosition: ChartDataLabelPosition.outside,
      connectorLineSettings: ConnectorLineSettings(type: ConnectorType.curve, length: '20%'), 
    ),
  ),   
],

Step 3: Set the labelIntersectAction to control how overlapping data labels are handled in the chart. Here’s how each option works:

LabelIntersectAction.hide – hides overlapping data labels to enhance clarity.
LabelIntersectAction.none – will not perform any action on intersection.
LabelIntersectAction.shift – rearranges overlapping data labels to avoid collisions. If labels move outside the chart area, they will be trimmed but remain interactive.

dataLabelSettings: const DataLabelSettings(
  ...
  labelIntersectAction: _labelIntersectAction,
),

Step 4: The dataLabelMapper property customizes the content of the data labels displayed on the chart. Here we displayed the custom x and y values for each segment.

dataLabelSettings: const DataLabelSettings(
  ...
  dataLabelMapper: (_ElectronicData data, int index) =>'${data.x}: ${data.y}',
),

By following these steps and the provided code snippet, you can successfully enable smart data labels using the shift option in labelIntersectAction, allowing for improved readability and clarity in circular charts.

View the Github Sample here.

Conclusion

I hope you enjoyed learning about how to enable smart data labels in Flutter Circular Chart.

You can refer to our Flutter CircularChart feature tour page to learn about its other groundbreaking feature representations. You can also explore our Flutter CircularChart documentation 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!

Did you find this information helpful?

Yes

Comments (0)

How to Enable Smart Data Labels in Flutter CircularCharts?

Access denied