Skip to content

Latest commit

 

History

History
120 lines (105 loc) · 14.9 KB

PieChartProps.md

File metadata and controls

120 lines (105 loc) · 14.9 KB

Pie Chart props

Prop Type Description Default value
data Array of pieDataItem An item object represents a section in the Pie chart. Descibed in the next table _
radius number Radius of the Pie chart 120
initialAngle number Starting angle in radians (illustrated below this table) 0
isThreeD boolean If set to true, it rotates and translates the chart to give it a 3D effect false
showGradient boolean Prop to enable radial gradient for the Pie sections false
gradientCenterColor ColorValue Gradient color at the center of the Pie chart 'white'
onPress Function Callback function called on press of Pie sections (takes item and index as parameter) null
focusOnPress boolean When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused false
toggleFocusOnPress boolean When set to true, if the user presses an already focused pie section, it will be unfocused true
extraRadiusForFocused number Extra radius for the focused Pie section radius/10
inwardExtraLengthForFocused number Extra length of focused Pie section towards the center (only for donut charts) 0
sectionAutoFocus boolean In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed false
onLabelPress Function Callback function called on press of a Label (takes item and index as parameter) onPress OR null
tiltAngle Angle in deg The angle by which the chart should be tilted '55deg' for 3D charts, otherwise 0
shadow boolean Shadow to the Pie chart, when set to true, it enhances the 3D effect false
shadowColor ColorValue Color of the shadow lightgray
shadowWidth number Width of the shadow radius*4/3
strokeWidth number Stroke (line) width for the Pie chart and its section 0
strokeColor ColorValue Stroke (line) color gray
backgroundColor ColorValue Background color of the container that contains the Pie chart white
showText boolean When set to true, displays text on the Pie sections false
textColor ColorValue Color of the label texts random colors
textSize number Size of the label texts (max allowed: radius / 5) 16
fontStyle string Style of the text - 'normal', 'italic' or 'oblique' 'normal'
fontWeight string Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc 'normal'
font string Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc 'Comic Sans MS'
showTextBackground boolean When set to true, displays background for text on the Pie sections false
textBackgroundColor ColorValue Background color for the label texts white
textBackgroundRadius number Radius for the background of the text labels textSize
showValuesAsLabels boolean When set to true, the values of the Pie sections are displayed as labels false
centerLabelComponent Function Component to be rendered at the center of the Pie chart _
semiCircle boolean When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter false
labelsPosition string Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' 'outward' for donut and semicircle, else 'mid'
pieInnerComponent () => svg element Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) _
paddingHorizontal number horizontal padding in the chart svg component (useful to accomodate "onBorder" labels) 0
paddingVertical number vertical padding in the chart svg component (useful to accomodate "onBorder" labels) 0

initialAngle

The default value is 0. The angles are distributed differently from the usual coordinate system. It is illustrated below-

labelsPosition

labels can be positioned 'onBorder', 'outward', 'mid' or 'inward'. Here's a demonstration for each of them-


onBorder


outward


mid


inward

The default value for labelsPosition is 'mid'. In case of donut and semicircle charts the default value becomes 'outward'

Note if labelsPosition is 'onBorder' then paddingHorizontal and paddingVertical have a default value equal to textBackgroundRadius


Item description (pieDataItem)

Prop Type Description
value number Value of the item, representing a section of the Pie chart
shiftX number Translates (shifts) the particular section horizontally by given value
shiftY number Translates (shifts) the particular section vertically by given value
shiftTextX number Translates (shifts) the position of label text horizontally
shiftTextY number Translates (shifts) the position of label text vertically
shiftTextBackgroundX number Shifts the background of label text horizontally (default value is shiftTextX)
shiftTextBackgroundY number Shifts the background of label text vertically (default value is shiftTextY)
color ColorValue Color (background color) of the section
text string Label text for the sections
textColor ColorValue Color of the text (label) inside the section
textSize number Size of the text (label) inside the section
fontStyle string Style of the text - 'normal', 'italic' or 'oblique'
fontWeight string Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc
font string Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc
textBackgroundColor ColorValue Background color for the label text
textBackgroundRadius number Radius for the background of the text label
labelPosition string Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid'
onPress Function Callback function called on press of Pie sections (takes item and index as parameter)
onLabelPress Function Callback function called on press of a Label (takes item and index as parameter)
strokeWidth number Stroke (line) width for the Pie chart and its section
strokeColor ColorValue Stroke (line) color
focused boolean When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property
pieInnerComponent () => svg element Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' )

Note If we pass shiftTextX, the background will also shift (because the library assigns a default value of shiftTextBackgroundX = shiftTextX). This can be overridden by manually passing shiftTextBackgroundX. Same applies to shiftTextBackgroundY

Donut chart related props

Prop Type Description Default value
donut boolean When set to true, renders a Donut chart (makes an inner ring) false
innerRadius number Radius of the inner ring radius/2
innerCircleColor ColorValue Color of the inner ring white
innerCircleBorderWidth number Stroke (border) width of the inner ring props.innerCircleBorderColor ? 5 : 0
innerCircleBorderColor ColorValue Stroke (border) color of the inner ring gray
shiftInnerCenterX number Shifts the inner ring horizontally to enhance the 3D effect 0
shiftInnerCenterY number Shifts the inner ring vertically to enhance the 3D effect 0
tilt number The factor (between 0 annd 1) by which the chart should be tilted if threeD then 0.5 else 1

Animation and Curved paths

Animation and curved paths are supported in <PieChartPro> component. It receives all the above props (same as the <PieChart> component)