We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback


Overview

The Flutter Pie Chart is a circular graphic, which is ideal for displaying proportional values in different categories. You can create beautiful, animated, real-time and high-performance pie chart that also supports the interactive features such as explode, tooltip and selection.

Beautiful Flutter Pie Chart


Key features

Flutter chart shows the expoded pie segment

Explode on touch

Explode a slice in the pie chart to differentiate it from other slices.

Flutter chart shows the semi pie chart

Semi pie

Configure the semi pie to visualize data in a different perspective and reduce the size of the rendering area.

Flutter chart group the smaller segments into a single segment

Grouping

Group smaller segments in the Flutter Pie Chart to a single segment called “others”.

Shows the customizable pie chart in Flutter

Customization

Customize the look and feel of the Flutter Pie Chart using built-in APIs.

Shows the smart labels of pie chart in Flutter

Smart labels

Arranges data labels smartly to avoid overlapping when the data point values fall in close range.


Code example

Easily get started with the Flutter Pie Chart using a few simple lines of DART code example as demonstrated below,

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.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;
    }

Learning resources

Navigate to GitHub code used to configure the Flutter pie chart

GitHub Code

The Flutter Pie Chart configuration code is available in GitHub

Navigate to the options available in User Guide to customize the Flutter pie chart

Flutter Pie Chart User Guide

Learn available options to customize the Flutter Pie Chart.

Navigate to the API references documentation of Flutter pie chart

Flutter Pie Chart API Reference

Explore the Flutter Pie Chart APIs.


Scroll up icon