repo_files/documentations/pie_chart.md
<a href="https://www.youtube.com/watch?v=VlXC-RAaX4Y&list=PL1-_rCwRcnbNpvodmbt43O81wMUdBv8-a"></a>
PieChart(
PieChartData(
// read about it in the PieChartData section
),
duration: Duration(milliseconds: 150), // Optional
curve: Curves.linear, // Optional
);
If you have a padding widget around the PieChart, make sure to set PieChartData.centerSpaceRadius to double.infinity
When you change the chart's state, it animates to the new state internally (using implicit animations). You can control the animation duration and curve using optional duration and curve properties, respectively.
| PropName | Description | default value |
|---|---|---|
| sections | list of PieChartSectionData that is shown on the pie chart | [] |
| centerSpaceRadius | free space in the middle of the PieChart, set double.infinity if you want it to be calculated according to the view size | double.nan |
| centerSpaceColor | colors the free space in the middle of the PieChart | Colors.transparent |
| sectionsSpace | space between the sections (margin of them). It does not work on html-rendere, read more about it here | 2 |
| startDegreeOffset | degree offset of the sections around the pie chart, should be between 0 and 360 | 0 |
| pieTouchData | PieTouchData holds the touch interactivity details | PieTouchData() |
| borderData | shows a border around the chart, check the FlBorderData | FlBorderData() |
| titleSunbeamLayout | whether to rotate the titles on each section of the chart | false |
| PropName | Description | default value |
|---|---|---|
| value | value is the weight of each section, for example if all values is 25, and we have 4 section, then the sum is 100 and each section takes 1/4 of the whole circle (360/4) degree | 10 |
| color | colors the section | Colors.red |
| gradient | You can use any Gradient here. such as LinearGradient or RadialGradient (you have to provide either color or gradient) | null |
| radius | the width radius of each section | 40 |
| showTitle | determines to show or hide the titles on each section | true |
| titleStyle | TextStyle of the titles | TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold) |
| title | title of the section | value |
| borderSide | Defines border stroke around the section | BorderSide(width: 0) |
| cornerRadius | defines corner radius for rounded section edges | 0 |
| badgeWidget | badge component of the section | null |
| titlePositionPercentageOffset | the place of the title in the section, this field should be between 0 and 1 | 0.5 |
| badgePositionPercentageOffset | the place of the badge component in the section, this field should be between 0 and 1 | 0.5 |
| PropName | Description | default value |
|---|---|---|
| enabled | determines to enable or disable touch behaviors | true |
| mouseCursorResolver | you can change the mouse cursor based on the provided FlTouchEvent and PieTouchResponse | MouseCursor.defer |
| touchCallback | listen to this callback to retrieve touch/pointer events and responses, it gives you a FlTouchEvent and PieTouchResponse | null |
| longPressDuration | allows to customize the duration of the longPress gesture. If null, the duration of the longPressGesture is kLongPressTimeout | null |
| PropName | Description | default value |
|---|---|---|
| touchLocation | the location of the touch event in the device pixels coordinates | required |
| touchedSection | Instance of PieTouchedSection which holds data about the touched section | null |
| PropName | Description | default value |
|---|---|---|
| touchedSection | the PieChartSectionData that user touched | null |
| touchedSectionIndex | index of the touched section | null |
| touchAngle | the angle of the touch | null |
| touchRadius | the radius of the touch | null |