# Styling

All styling in the `Piechart` and other chart widgets are **Hierarchical** from Top to Bottom. This means that the *Bottom/Child* level styling will **override** the *Top/Parent* level styling.

The class `SliceDataStyle` provides the styling options for the `Piechart`.

{% hint style="info" %}
The Hierarchical Styling is available for `labelStyle` which provides Text Styling for all the Pie piece labels of a Pie Chart.
{% endhint %}

Let's take an example to see how it works.

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

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

class TestPieCharts 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: 18,
          ),
          SliceData(
            label: (_, value) => 'Quarter 2',
            value: 45,
          ),
          SliceData(
            label: (_, value) => 'Quarter 3',
            value: 72,
          ),
          SliceData(
            label: (_, value) => 'Quarter 4',
            value: 55,
          ),
        ],
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://672051664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JD7NLiao8wvvuzkAjT9%2Fuploads%2FHsrqPgmCVqsRNsZZqEx1%2FScreenshot%202023-04-26%20at%201.33.07%20PM.png?alt=media&#x26;token=8aca476b-89c6-47c4-9146-2a5cf972aeaa" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Above example will draw four Pie Slices as a PieChart. Now let's add styling to our Pie pieces in this example.

### Series Styling

To provide uniform styling for **All the Pie Pieces** in the `Piechart`, we provide the styling at *Series* Level to the `seriesStyle` property of the `PieSeries` class.

{% 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>        seriesStyle: SliceDataStyle(
</strong><strong>          radius: 100,
</strong><strong>          color: Color(0xFF7136E7),
</strong><strong>          strokeWidth: 3.0,
</strong><strong>          strokeColor: Colors.white,
</strong><strong>        ),
</strong>        slices: &#x3C;SliceData>[
          SliceData(
            label: (_, value) => 'Quarter 1',
            value: 18,
          ),
          SliceData(
            label: (_, value) => 'Quarter 2',
            value: 45,
          ),
          SliceData(
            label: (_, value) => 'Quarter 3',
            value: 72,
          ),
          SliceData(
            label: (_, value) => 'Quarter 4',
            value: 55,
          ),
        ],
      ),
    );
  }
}
</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%2FdWakv5PijerXnUKpUTn0%2FScreenshot%202023-04-26%20at%201.38.13%20PM.png?alt=media&#x26;token=a87fc70d-5d9f-4d3f-b09f-afdf121fab2f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Pie Styling

Besides `seriesStyle`, you can can also customize **each individual pie** with the property **style** for every `SliceData`. This is the bottom most styling property and will override the parent series level styling.

{% 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(
        seriesStyle: SliceDataStyle(
          radius: 200,
          color: Color(0xFF7136E7),
          strokeWidth: 3.0,
          strokeColor: Colors.white,
        ),
        slices: &#x3C;SliceData>[
          SliceData(
            label: (_, value) => 'Quarter 1',
            value: 18,
          ),
          SliceData(
<strong>            style: SliceDataStyle(
</strong><strong>              radius: 150,
</strong><strong>              color: Color(0xFFBDA2F4),
</strong><strong>              labelPosition: 200,
</strong><strong>              strokeWidth: 2.0,
</strong><strong>              strokeColor: Colors.white,
</strong><strong>            ),
</strong>            label: (_, value) => 'Quarter 2',
            value: 45,
          ),
          SliceData(
<strong>            style: SliceDataStyle(
</strong><strong>              radius: 250,
</strong><strong>              color: Color(0xFFFFB86E),
</strong><strong>              labelPosition: 125,
</strong><strong>              strokeWidth: 2.0,
</strong><strong>              strokeColor: Colors.white,
</strong><strong>            ),
</strong>            label: (_, value) => 'Quarter 3',
            labelStyle: ChartTextStyle(
              textStyle: GoogleFonts.poppins(
                color: Color(0xFF693C00),
              ),
            ),
            value: 72,
          ),
          SliceData(
<strong>            style: SliceDataStyle(
</strong><strong>              radius: 175,
</strong><strong>              color: Color(0xFF693C00),
</strong><strong>              labelPosition: 90,
</strong><strong>              strokeWidth: 2.0,
</strong><strong>              strokeColor: Colors.white,
</strong><strong>            ),
</strong>            label: (_, value) => 'Quarter 4',
            labelStyle: ChartTextStyle(
              textStyle: GoogleFonts.poppins(
                color: Color(0xFFFFB86E),
              ),
            ),
            value: 55,
          ),
        ],
      ),
    );
  }
}
</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%2FHXwgRgbFnq2jZUgUHQ1O%2FScreenshot%202023-04-26%20at%201.54.09%20PM.png?alt=media&#x26;token=dc29aa5d-0628-4fc3-8e1c-4946ede37a60" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The above example provides a clear picture of the **Hierarchical Structure** for styling across the widget tree classes.

### SliceDataStyle Properties

| Name          | Type        | Required                               | Default Value |
| ------------- | ----------- | -------------------------------------- | ------------- |
| radius        | `double?`   | <mark style="color:blue;">false</mark> | `null`        |
| labelPosition | `double?`   | <mark style="color:blue;">false</mark> | `null`        |
| color         | `Color?`    | <mark style="color:blue;">false</mark> | `null`        |
| gradient      | `Gradient?` | <mark style="color:blue;">false</mark> | `null`        |
| strokeWidth   | `double?`   | <mark style="color:blue;">false</mark> | `null`        |
| strokeColor   | `Color?`    | <mark style="color:blue;">false</mark> | `null`        |