Search code examples
flutterdartchartspie-chartfl-chart

Flutter pie chart starting at top


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:

enter image description here

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:

enter image description here

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.


Solution

  • 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)