Flutter Docs
  • Flutter Docs
  • Charts
    • Chart It
    • Guides
      • Cartesian Charts
        • Chart Structuring
          • Grid Styling
          • Axes Styling
          • Axis Labels
        • Charts
          • Bar Chart
            • BarSeries
            • Bar Groups
              • SimpleBar
              • MultiBar
            • Styling
            • Bar Interactions
              • Snap to Bar
              • Fuzziness
      • Radial Charts
        • Charts
          • Pie & Donut Chart
            • PieSeries
            • SliceData
            • Styling
            • Interactions
      • Animations
      • Interactions
    • API Documentation
Powered by GitBook
On this page
  1. Charts
  2. Guides
  3. Radial Charts
  4. Charts

Pie & Donut Chart

In depth guide to the PieChart Widget.

A Pie Chart represents the numeric data as a section or pie of an entire circle. The total of all values in the data set is the entire angle of the circle i.e. 360°.

An alternative version of the Pie Chart representation is a Donut Chart, where an inner area of removed from the Pie Chart, resulting into a Donut of numeric sections.

To draw a Pie Chart, we will use the PieChart widget. Let's use the widget to draw a simple pie chart with two pie pieces.

...
import 'package:chart_it/chart_it.dart';

class TestPieCharts extends StatefulWidget {
  const TestPieCharts({Key? key}) : super(key: key);

  @override
  State<TestPieCharts> createState() => _TestPieChartsState();
}

class _TestPieChartsState extends State<TestPieCharts> {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      data: PieSeries(
        slices: <SliceData>[
          SliceData(
            label: (_, value) => 'Quarter 1',
            value: 42,
          ),
          SliceData(
            label: (_, value) => 'Quarter 2',
            value: 58,
          ),
        ],
      ),
    );
  }
}

Before moving forward, let's understand the above example code.

The widget PieChart requires a mandatory field data of type PieSeries. This is a series class that ensures that any data provided to this series will be represented as a Pie or Donut Chart.

The PieSeries requires slices which is a List of SliceData. Each SliceData represents a Pie piece of the entire circle. The total of all the value in the slices will the total area of the circle.

We can use the same Widget to convert a PieChart into a DonutChart! Let's convert the above example into a Donut Chart.

...
import 'package:chart_it/chart_it.dart';

class TestPieCharts extends StatefulWidget {
  const TestPieCharts({Key? key}) : super(key: key);

  @override
  State<TestPieCharts> createState() => _TestPieChartsState();
}

class _TestPieChartsState extends State<TestPieCharts> {
  @override
  Widget build(BuildContext context) {
    return PieChart(
      data: PieSeries(
        donutRadius: 75.0,
        donutLabel: () => 'Fiscal Year',
        slices: <SliceData>[
          SliceData(
            label: (_, value) => 'First Half',
            value: 42,
          ),
          SliceData(
            label: (_, value) => 'Second Half',
            value: 58,
          ),
        ],
      ),
    );
  }
}

Now we have converted our existing PieChart example into a Donut Chart! Sweet.

PreviousChartsNextPieSeries

Last updated 1 year ago