Pie Chart in Flutter Circular Charts (SfCircularChart)

9 Jun 202122 minutes to read

To create a Flutter pie chart quickly, you can check this video.

To render a pie chart, create an instance of PieSeries, and add it to the series collection property of SfCircularChart. The following properties can be used to customize the appearance of pie segment:

  • opacity - controls the transparency of the chart series.
  • strokeWidth - changes the stroke width of the series.
  • strokeColor - changes the stroke color of the series.
  • pointColorMapper - maps the color for individual points from the data source.
  • pointShaderMapper - maps the shader (gradient or image shader) for individual points from the data source.
  • pointRenderMode - defines the painting mode for the data points either as segment or gradient.
  • dart
  • @override
        Widget build(BuildContext context) {
            final List<ChartData> chartData = [
                ChartData('David', 25),
                ChartData('Steve', 38),
                ChartData('Jack', 34),
                ChartData('Others', 52)
            ];
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                // Render pie chart
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    pointColorMapper:(ChartData data,  _) => data.color,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y, [this.color]);
            final String x;
            final double y;
            final Color color;
        }

    Pie chart

    Changing pie size

    You can use the radius property to change the diameter of the pie chart with respect to the plot area. The default value is 80%.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    // Radius of pie
                                    radius: '50%'
                                )
                            ]
                        )
                    )
                )
            );
        }

    Pie size

    Exploding a segment

    You can explode a pie segment by enabling the explode property. The following properties can be used to customize the explode options:

    • explodeIndex - specifies the index of the slice to explode it at the initial rendering.
    • explodeOffset - specifies the offset of exploded slice. The value ranges from 0% to 100%.
    • explodeGesture - gesture for activating the explode. Explode can be activated in single tap, double tap, and long press. The available gesture types are singleTap, doubleTap, longPress, and none and the default value is singleTap.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    // Segments will explode on tap
                                    explode: true,
                                    // First segment will be exploded on initial rendering 
                                    explodeIndex: 1
                                )
                            ]
                        )
                    )
                )
            );
        }

    Pie explode

    Exploding all the segments

    Using the explodeAll property of PieSeries, you can explode all the pie segments.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    explode: true,
                                    // All the segments will be exploded
                                    explodeAll: true
                                )
                            ]
                        )
                    )
                )
            );
        }

    Pie explode all

    Angle of pie

    SfCircularChart allows you to render all the data points or segments in semi-pie, quarter-pie, or in any sector using the startAngle and endAngle properties.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    startAngle: 270, // starting angle of pie
                                    endAngle: 90 // ending angle of pie
                                )
                            ]
                        )
                    )
                )
            );
        }

    Pie angle

    Grouping data points

    The small segments in the pie chart can be grouped into others category using the groupTo and groupMode properties of PieSeries. The groupMode property specifies the grouping type based on the actual data point value or by points length, and the groupTo property sets the limit to group data points into a single slice. The grouped segment is labeled as Others in legend and toggled as any other segment. The default value of the groupTo property is null, and the default value of groupMode property is point.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    groupMode: CircularChartGroupMode.point,
                                    // As the grouping mode is point, 2 points will be grouped
                                    groupTo: 2
                                )
                            ]
                        )
                    )
                )
            );
        }

    Pie grouping

    Various radius for each slice

    The pointRadiusMapper maps the field name, which will be considered for calculating the radius of the data points.

  • dart
  • @override
        Widget build(BuildContext context) {
            final List<ChartData> chartData = [
                ChartData('USA', 10, '70%'),
                ChartData('China', 11, '60%'),
                ChartData('Russia', 9, '52%'),
                ChartData('Germany', 10, '40%')
            ];
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCircularChart(
                            series: <CircularSeries>[
                                PieSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData data, _) => data.x,
                                    yValueMapper: (ChartData data, _) => data.y,
                                    // Radius for each segment from data source
                                    pointRadiusMapper: (ChartData data, _) => data.size
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y, this.size);
            final String x;
            final double y;
            final String size;
        }

    Pie various radius