Implementing Syncfusion Flutter Circular Charts

SfCircularChart

When to Use This Skill

• User wants a pie chart to show part-to-whole proportions
• User wants a doughnut chart — ring-style chart, optionally with center content
• User wants a radial bar chart for comparing categories in circular arcs
• Any

  SfCircularChart

  ,

  PieSeries

  ,

  DoughnutSeries

  , or

  RadialBarSeries

  question
• Customizing segment colors, explode behavior, grouping small slices
• Adding data labels inside/outside slices with connector lines
• Configuring legend, tooltip, selection, annotations
• Exporting the chart as PNG or PDF
• Handling accessibility or RTL layouts

Component Overview

• PieSeries: Traditional pie chart showing data as segments of a circle. Supports exploding segments, semi-circle rendering, grouping small slices, per-point radius customization, and various interaction modes.
• DoughnutSeries: Ring-shaped chart with customizable inner radius. Ideal for displaying data with center annotations, supports rounded corners, center elevation effects, and all pie chart features.
• RadialBarSeries: Circular progress-style chart with customizable tracks. Features include maximum value configuration, corner styles (flat/rounded), track opacity and color customization, and data labels along the arc.

Quick Start

import 'package:syncfusion_flutter_charts/charts.dart';

class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> data = [
      ChartData('Jan', 35),
      ChartData('Feb', 28),
      ChartData('Mar', 34),
      ChartData('Apr', 32),
      ChartData('May', 40),
    ];

    return SfCircularChart(
      title: ChartTitle(text: 'Monthly Sales'),
      legend: Legend(isVisible: true),
      tooltipBehavior: TooltipBehavior(enable: true),
      series: <CircularSeries>[
        PieSeries<ChartData, String>(
          dataSource: data,
          xValueMapper: (ChartData d, _) => d.x,
          yValueMapper: (ChartData d, _) => d.y,
          dataLabelSettings: DataLabelSettings(isVisible: true),
          enableTooltip: true,
        ),
      ],
    );
  }
}

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

Common Patterns

Doughnut with center annotation

SfCircularChart(
  annotations: <CircularChartAnnotation>[
    CircularChartAnnotation(
      widget: Text('62%', style: TextStyle(fontSize: 25)),
    ),
  ],
  series: <CircularSeries>[
    DoughnutSeries<ChartData, String>(
      dataSource: data,
      xValueMapper: (d, _) => d.x,
      yValueMapper: (d, _) => d.y,
      innerRadius: '60%',
    ),
  ],
)

Radial bar with track and rounded corners

RadialBarSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  maximumValue: 100,
  cornerStyle: CornerStyle.bothCurve,
  useSeriesColor: true,
  trackOpacity: 0.3,
)

Pie with exploded segment on tap

PieSeries<ChartData, String>(
  dataSource: data,
  xValueMapper: (d, _) => d.x,
  yValueMapper: (d, _) => d.y,
  explode: true,
  explodeIndex: 0,
  explodeGesture: ActivationMode.singleTap,
)

Key Properties

series

SfCircularChart

CircularSeries

xValueMapper

yValueMapper

dataLabelSettings

legend

SfCircularChart

tooltipBehavior

SfCircularChart

annotations

SfCircularChart

radius

'80%'

innerRadius

explode

maximumValue

palette

SfCircularChart

Documentation and Navigation Guide

Getting Started

• Package installation and pubspec setup
• Import statement and initialization
• Binding data source with

  PieSeries

• Adding title, data labels, legend, tooltip
• Complete runnable minimal example

Chart Types (Pie, Doughnut, Radial Bar)

• PieSeries

  — radius, explode, angle (semi-pie), grouping small slices, per-slice radius

• DoughnutSeries

  — inner radius, rounded corners, center elevation, angle, grouping

• RadialBarSeries

  — inner radius, track customization, maximumValue, overfilled bar, data labels

Series Customization

• Animation duration and delay
• Color palette and per-point color mapping
• Gradient fill (linear, sweep, radial)
• Image shader fill
• Per-point shader mapping
• Point render mode (solid vs sweep gradient)
• Empty/null data point handling
• Sorting data points

Data Labels

• Enable and style data labels
• Positioning (inside vs outside)
• Smart label layout (avoid overlap)
• Connector lines for outside labels
• Custom label text (dataLabelMapper)
• Label templates (builder)
• Zero-value label suppression

Legend and Title

• Enable and customize legend appearance
• Legend title, positioning, and orientation
• Overflow handling (wrap/scroll)
• Floating legend with custom offset
• Legend item templates
• Chart title and text styling

Tooltip and Selection

• Enable and configure

  TooltipBehavior

• Tooltip format, positioning, templates
• Activation modes (singleTap, longPress, doubleTap)
• Segment selection with

  SelectionBehavior

• Customizing selected/unselected segment appearance
• Multi-selection

Annotations and Appearance

• Placing widgets inside the chart (

  CircularChartAnnotation

  )
• Positioning annotations by radius and alignment
• Watermark pattern
• Chart sizing, margin, background color and image

Accessibility and Export

• Accessibility (contrast, large fonts, tappable targets)
• RTL (right-to-left) layout support
• Export chart as PNG image (

  toImage

  )
• Export chart as PDF (

  syncfusion_flutter_pdf

  )