Added initialAngle to Pie charts and fixed issue with barMarginBottom
This commit is contained in:
parent
cc423c4986
commit
9f10683cc4
Binary file not shown.
After Width: | Height: | Size: 31 KiB |
|
@ -4,6 +4,7 @@
|
||||||
| -------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | --------------- |
|
| -------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | --------------- |
|
||||||
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
|
| 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 |
|
| 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 |
|
| 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 |
|
| shadow | Boolean | Shadow to the Pie chart, when set to true, it enhances the 3D effect | false |
|
||||||
| shadowColor | ColorValue | Color of the shadow | lightgray |
|
| shadowColor | ColorValue | Color of the shadow | lightgray |
|
||||||
|
@ -24,6 +25,11 @@
|
||||||
| centerLabelComponent | Function | Component to be rendered at the center of the Pie chart | \_ |
|
| 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 |
|
| semiCircle | Boolean | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | false |
|
||||||
|
|
||||||
|
#### initialAngle
|
||||||
|
|
||||||
|
The default value is 0. The angles are distributed differently from the usual coordinate system. It is illustrated below-
|
||||||
|
<img src='../../demos/pie.png' alt='' height=400 width=400/>
|
||||||
|
|
||||||
### Item description
|
### Item description
|
||||||
|
|
||||||
| Prop | Type | Description |
|
| Prop | Type | Description |
|
||||||
|
|
|
@ -111,7 +111,9 @@ const RenderBars = (props: Props) => {
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const barMarginBottom =
|
const barMarginBottom =
|
||||||
item.barMarginBottom === 0 ? 0 : props.barMarginBottom || 0;
|
item.barMarginBottom === 0
|
||||||
|
? 0
|
||||||
|
: item.barMarginBottom || props.barMarginBottom || 0;
|
||||||
|
|
||||||
const renderLabel = (label: String, labelTextStyle: any, value: number) => {
|
const renderLabel = (label: String, labelTextStyle: any, value: number) => {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -34,6 +34,7 @@ type propTypes = {
|
||||||
|
|
||||||
centerLabelComponent?: Function;
|
centerLabelComponent?: Function;
|
||||||
tilt?: number;
|
tilt?: number;
|
||||||
|
initialAngle?: number;
|
||||||
};
|
};
|
||||||
type itemType = {
|
type itemType = {
|
||||||
value: number;
|
value: number;
|
||||||
|
@ -96,6 +97,7 @@ export const PieChart = (props: propTypes) => {
|
||||||
'800',
|
'800',
|
||||||
'900',
|
'900',
|
||||||
];
|
];
|
||||||
|
const initialAngle = props.initialAngle || 0;
|
||||||
|
|
||||||
let isDataShifted = false;
|
let isDataShifted = false;
|
||||||
data.forEach((item: any) => {
|
data.forEach((item: any) => {
|
||||||
|
@ -148,7 +150,7 @@ export const PieChart = (props: propTypes) => {
|
||||||
/******************************************************/
|
/******************************************************/
|
||||||
|
|
||||||
let i = 0,
|
let i = 0,
|
||||||
angleSum = 0;
|
angleSum = initialAngle;
|
||||||
let colors = [
|
let colors = [
|
||||||
'cyan',
|
'cyan',
|
||||||
'green',
|
'green',
|
||||||
|
|
Loading…
Reference in New Issue