PIE

---

Props

• width: number
• height: number
• dataKey: string
• value: string
• colorPalette: array
• colorType: string
• margin: number
• style: object
• text: object
• arc: object
• tooltip: object
• hoverStyle: object

---

Width

• Required

Height

• Required

DataKey

• Required
• Object key name from data to display in Pie graph
• For ex: data=[{type: 'b', amount: 300 }]
  We define the key as type as you can see in the image.
  

Value

• Required
• Object key name from data to display in Pie graph
• For ex: data=[{type: 'b', amount: 300 }]
  We define the value as amount as you can see in the image.
  

ColorPalette

• Optional
• Array of color to fill the pie graph. You can personally pick the colors to show in the graph
• For ex: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6']

ColorType

• Optional
• Array of color to fill the pie graph
• It has default value as Color-1
• List of ColorType

  ColorType	ColorSet
  Color-1
  Color-2
  Color-3
  Color-4
  Color-5
  Color-6
  Color-7
  Color-8
  Color-9
  Color-10

Margin

• Optional

Style

• Optional
• Styling for the Pie graph
• style is object and it contains following: stroke, strokeWidth, strokeColor, opacity
• style.stroke: boolean (Default value is false. This enables the style to be on and off)
• style.strokeWidth: string (Default value is 'none'. For ex: '1px')
• style.strokeColor: string (Default value is 'none'. For ex: 'black')
• style.opacity: number (Default value is null. For ex: 0.8)

Text

• Optional
• Text and Text Styling
• text is object and it contains following: label, textSize, textAnchor, textFamily, textWeight
• text.show: boolean (Default value is false. This enables the text to be on and off)
• text.textSize: number (Default value is 12)
• text.textAnchor: string (Default value is 'middle'. Options: 'start', 'middle', 'end')
• text.textFamily: string (Default value is 'serif')
• text.textWeight: number (Default value is 400)
  

Arc

• Optional
• arc is object and it contains following: padAngle, cornerRadius
• arc.padAngle: number (Default value is 0. Range is between 0.02 <= padAngle <= 0.1.)
  
• arc.cornerRadius: number (Default value is 0)
  

Tooltip

• Optional
• Tooltip and Tooltip Styling
• tooltip is object and it contains following: show, background, border, borderRadius, padding, color, fontFamily, fontWeight, text
• tooltip.show: boolean (Default value is false. This enables the tooltip to be on and off)
• tooltip.background: string (Default value is '#FFF')
• tooltip.border: string (Default value is 'none')
• tooltip.borderRadius: string (Default value is '0px')
• tooltip.padding: string (Default value is '0px')
• tooltip.color: string (Default value is 'black')
• tooltip.fontFamily: string (Default value is 'serif')
• tooltip.fontWeight: number (Default value is 400)
• tooltip.text: string (For ex: '<div>Hello.</div><div>(%key%): (%value%)</div>')
  You can show data by wrapping the data key with this syntax (% %) around it.
  

HoverStyle

• Optional
• Styling when the mouse hovers
• hoverStyle is object and it contains following: style, opacity, strokeWidth, strokeColor, cursorPointer
• hoverStyle.style: boolean (Default value is false. This enables the hoverStyle to be on and off)
• hoverStyle.opacity: number or string (Default value is 'none'. For ex: opacity: 0.8)
• hoverStyle.strokeWidth: string (Default value is 'none'. For ex: '1px')
• hoverStyle.strokeColor: string (Default value is 'none'. For ex: 'black')
• hoverStyle.cursorPointer: string or null (Default value is null. For ex: 'pointer')