# Pie & Donut Chart

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.

{% tabs %}
{% tab title="Code Sample" %}

```dart
...
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,
          ),
        ],
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FxUlVmzhMZyM3FkAO5FFo%2FScreenshot%202023-04-26%20at%201.09.09%20PM.png?alt=media&#x26;token=603413e1-4dfc-4325-87e9-688116363176" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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.

{% tabs %}
{% tab title="Code Sample" %}

<pre class="language-dart"><code class="lang-dart">...
import 'package:chart_it/chart_it.dart';

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

  @override
  State&#x3C;TestPieCharts> createState() => _TestPieChartsState();
}

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

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FBDsurQlHwkvXCdIpNaxb%2FScreenshot%202023-04-26%20at%201.11.29%20PM.png?alt=media&#x26;token=fcd57ae1-f9ee-4a93-8575-a23415cb3eb7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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