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.

The Hierarchical Styling is available for labelStyle which provides Text Styling for all the Pie piece labels of a Pie Chart.

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

Code Sample

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

Result

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.

Code Sample

...
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(
        seriesStyle: SliceDataStyle(
          radius: 100,
          color: Color(0xFF7136E7),
          strokeWidth: 3.0,
          strokeColor: Colors.white,
        ),
        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,
          ),
        ],
      ),
    );
  }
}

Result

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.

Code Sample

...
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(
        seriesStyle: SliceDataStyle(
          radius: 200,
          color: Color(0xFF7136E7),
          strokeWidth: 3.0,
          strokeColor: Colors.white,
        ),
        slices: <SliceData>[
          SliceData(
            label: (_, value) => 'Quarter 1',
            value: 18,
          ),
          SliceData(
            style: SliceDataStyle(
              radius: 150,
              color: Color(0xFFBDA2F4),
              labelPosition: 200,
              strokeWidth: 2.0,
              strokeColor: Colors.white,
            ),
            label: (_, value) => 'Quarter 2',
            value: 45,
          ),
          SliceData(
            style: SliceDataStyle(
              radius: 250,
              color: Color(0xFFFFB86E),
              labelPosition: 125,
              strokeWidth: 2.0,
              strokeColor: Colors.white,
            ),
            label: (_, value) => 'Quarter 3',
            labelStyle: ChartTextStyle(
              textStyle: GoogleFonts.poppins(
                color: Color(0xFF693C00),
              ),
            ),
            value: 72,
          ),
          SliceData(
            style: SliceDataStyle(
              radius: 175,
              color: Color(0xFF693C00),
              labelPosition: 90,
              strokeWidth: 2.0,
              strokeColor: Colors.white,
            ),
            label: (_, value) => 'Quarter 4',
            labelStyle: ChartTextStyle(
              textStyle: GoogleFonts.poppins(
                color: Color(0xFFFFB86E),
              ),
            ),
            value: 55,
          ),
        ],
      ),
    );
  }
}

Result

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?	false	null
labelPosition	double?	false	null
color	Color?	false	null
gradient	Gradient?	false	null
strokeWidth	double?	false	null
strokeColor	Color?	false	null