mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-24 09:38:23 +00:00
58 lines
7.0 KiB
Markdown
58 lines
7.0 KiB
Markdown
# Pie Chart props
|
|
|
|
| Prop | Type | Description | Default value |
|
|
| -------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | --------------- |
|
|
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
|
|
| radius | number | Radius of the Pie chart | 120 |
|
|
| isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false |
|
|
| 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 |
|
|
|
|
### Item description
|
|
|
|
| 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 |
|
|
| 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 |
|
|
|
|
### 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 |
|