Flutter pie chart starting at top

Question

I want to create a pie chart (or rather a ring chart) that show how much of a given value (say 1000 euros) has been used up. I tried the packages pie_chart and fl_chart and while both draw nice charts, I cannot display it the exact way I want. What I get from both packages so far is this, where the smaller sections start anywhere on the ring:

What I want it to look like is this where the smaller sections start at the top and fill the space clockwise depending on how much of the available money is used up, similar to a progress indicator:

I tried rotating the chart, but the rotation degree is always depending on how much space the smaller sections take up and I don't know how to calculate that.

score 1 · Answer 1 · edited Dec 27 '22 at 07:44

You need to set a transparent color on the section where you want to make a half pie.

Use this code:

Colors.transparent,

Code sample:

class Pie_Data {
    static List<Pie_Chart> data = [
        Pie_Chart(name: "Carlos", percent: 20, color:  Colors.transparent),
        Pie_Chart(name: "Alexa", percent: 33, color: const Color(0xffffc107)),
        Pie_Chart(name: "Lucas", percent: 18, color: const Color(0xff1b5e20)),
        Pie_Chart(name: "George", percent: 8, color: const Color(0xffd50000)),
    ];
}

Juzer Taher Totanawala · Answer 2 · 2021-02-18T11:58:52.267

0

The progress indicator package is quite flexible and can solve your problem

To get different color of your choice based on percentages, you can use this approach:

final double _profilePercentage = 0.25;

Color getProfileStatusColor() {
    switch ((_profilePercentage * 100).toInt()) {
      case 100:
        return kSuccessColor;
      case 75:
        return kSuccessColor;
      case 50:
        return kAccentColor;
      case 25:
        return kErrorColor;

      default:
        return kGreyColor;
    }
  }

where, the widget looks something like this:

LinearPercentIndicator(
                              width: MediaQuery.of(context).size.width * 0.85 -
                                  60.0,
                              animation: true,
                              lineHeight: 7.0,
                              animationDuration: 500,
                              percent: _profilePercentage,
                              linearStrokeCap: LinearStrokeCap.roundAll,
                              progressColor: getProfileStatusColor(),
                            ),

edited Feb 18 '21 at 11:58

answered Feb 18 '21 at 11:17

Juzer Taher Totanawala

150
7

It looks good, but as far as I can see the progress bar can only have one color, but I want it to have multiple colors to show: from 1000€ you have used up 25% and these consist of 10% X and 15% Y (each with different colors) – Wckd_Panda Feb 18 '21 at 11:46
For different percentages, you can write a color getter method of your own. I am attaching an example method for your understanding in my answer. Have a look at it. – Juzer Taher Totanawala Feb 18 '21 at 11:57
It seems I did not explain what I want correctly. I want multiple colors in the same percentIndicator as shown in the images in the initial post. I managed to make it work with stacked PercemtIndicators. – Wckd_Panda Feb 18 '21 at 12:13

score 0 · Accepted Answer · answered Feb 18 '21 at 11:56

I found a solution here: https://stackoverflow.com/a/54709279/11487803 They use a stack with multiple CircularProgressIndicator to achieve this, but it should also be possible with a CircularPercentIndicator (where you have to set the background color to transparent to see the element behind)

score 0 · Answer 4 · answered Apr 03 '22 at 21:32

In my case startDegreeoffset solved problem

  child: Stack(
    children: [
      PieChart(
        PieChartData(
          startDegreeOffset: 270,
          borderData: FlBorderData(show: false),
          sectionsSpace: 0,
          centerSpaceRadius: EFRDimen.dimen64,
          sections: getSections(),
        ),
      ),
      Center(
        child: Text(
          'someString',
          style: const TextStyle(
            fontFamily: "ScreenSans",
            fontSize: Dimen.fontSize14,
            color: FRColor.textGray,
          ),
        ),
      ),
    ],
  ),

Flutter pie chart starting at top

4 Answers4