Flutter-docs/Flutter/circular-charts/pie-chart.md

layout	title	description	platform	control	documentation
post	Pie Chart in Flutter Circular Charts widget | Syncfusion	Learn here all about Pie Chart of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.	flutter	Chart	ug

Pie Chart in Flutter Circular Charts (SfCircularChart)

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.

{% highlight 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;
}

{% endhighlight %}

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%.

{% highlight 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%'
                        )
                    ]
                )
            )
        )
    );
}

{% endhighlight %}

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.

{% highlight 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
                        )
                    ]
                )
            )
        )
    );
}

{% endhighlight %}

Exploding all the segments

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

{% highlight 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
                        )
                    ]
                )
            )
        )
    );
}

{% endhighlight %}

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.

{% highlight 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
                        )
                    ]
                )
            )
        )
    );
} 

{% endhighlight %}

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.

{% highlight 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
                        )
                    ]
                )
            )
        )
    );
}

{% endhighlight %}

Various radius for each slice

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

{% highlight 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;
}

{% endhighlight %}