Skip to content

Latest commit

 

History

History
81 lines (65 loc) · 5.39 KB

pie_chart.md

File metadata and controls

81 lines (65 loc) · 5.39 KB
Raw

How to use

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

Implicit Animations

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.

PieChartData

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

PieChartSectionData

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

PieTouchData (read about touch handling)

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

PieTouchResponse

PropName Description default value
touchedSection Instance of PieTouchedSection which holds data about the touched section null

PieTouchedSection

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

some samples

Sample 1 (Source Code)

Sample 2 (Source Code)

Sample 3 (Source Code)