diff --git a/App.js b/App.js
index 74cf084..15940ce 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { BarChart, LineChart, PieChart } from './src';
+import {View, Text, StyleSheet} from 'react-native';
+import {BarChart, LineChart, PieChart} from './src';
const App = () => {
// const lineData = [
@@ -19,73 +19,174 @@ const App = () => {
// ];
const data = [
- { value: 15, label: 'Jan', showVerticalLine: true },
- { value: 40, label: 'Feb', verticalLineColor: 'red', showVerticalLine: true, verticalLineThickness: StyleSheet.hairlineWidth },
- { value: 10, label: 'Mar', showDataPoint: true, dataPointShape: 'rectangular', dataPointHeight: 20, dataPointWidth: 20, },
- { value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true },
+ {value: 15, label: 'Jan', showVerticalLine: true},
+ {
+ value: 40,
+ label: 'Feb',
+ verticalLineColor: 'red',
+ showVerticalLine: true,
+ verticalLineThickness: StyleSheet.hairlineWidth,
+ },
+ {
+ value: 10,
+ label: 'Mar',
+ showDataPoint: true,
+ dataPointShape: 'rectangular',
+ dataPointHeight: 20,
+ dataPointWidth: 20,
+ },
+ {value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true},
];
const stackData = [
{
- stacks:
- [{
- value: 10, color: 'red'
- },
- {
- value: 20, color: 'blue', marginBottom: 1
- }],
- label: 'Jan'
+ stacks: [
+ {value: 10, color: 'orange'},
+ {value: 20, color: '#4ABFF4', marginBottom: 2},
+ ],
+ label: 'Jan',
},
{
- stacks:
- [{
- value: 14, color: 'red'
- },
- {
- value: 18, color: 'blue', marginBottom: 1
- }],
- label: 'Feb'
+ stacks: [
+ {value: 10, color: '#4ABFF4'},
+ {value: 11, color: 'orange', marginBottom: 2},
+ {value: 15, color: '#28B2B3', marginBottom: 2},
+ ],
+ label: 'Mar',
},
{
- stacks:
- [{
- value: 7, color: 'red'
- },
- { value: 11, color: 'green', marginBottom: 1 },
- {
- value: 10, color: 'blue', marginBottom: 1
- }],
- label: 'Mar'
- }
+ stacks: [
+ {value: 14, color: 'orange'},
+ {value: 18, color: '#4ABFF4', marginBottom: 2},
+ ],
+ label: 'Feb',
+ },
+ {
+ stacks: [
+ {value: 7, color: '#4ABFF4'},
+ {value: 11, color: 'orange', marginBottom: 2},
+ {value: 10, color: '#28B2B3', marginBottom: 2},
+ ],
+ label: 'Mar',
+ },
];
+ // const barData1 = [
+ // {value: 250, label: 'M'},
+ // {value: 500, label: 'T', frontColor: '#177AD5'},
+ // {value: 745, label: 'W', frontColor: '#177AD5'},
+ // {value: 320, label: 'T'},
+ // {value: 600, label: 'F', frontColor: '#177AD5'},
+ // {value: 256, label: 'S'},
+ // {value: 300, label: 'S'},
+ // ];
+
+ // const lineData1 = [
+ // {value: 0},
+ // {value: 20},
+ // {value: 18},
+ // {value: 40},
+ // {value: 36},
+ // {value: 60},
+ // {value: 54},
+ // {value: 85},
+ // ];
+
+ // const MyComponent = () => {
+ // return (
+ //
+ // Hello
+ //
+ // );
+ // };
+
+ const barData = [
+ {value: 230, label: 'Jan', frontColor: '#4ABFF4'},
+ {value: 180, label: 'Feb', frontColor: '#79C3DB'},
+ {value: 195, label: 'Mar', frontColor: '#28B2B3'},
+ {value: 250, label: 'Apr', frontColor: '#4ADDBA'},
+ {value: 320, label: 'May', frontColor: '#91E3E3'},
+ ];
return (
-
-
- {/*
+ {/* */}
+
+
+ {/* */}
+
+ {/* */}
+ {/*
+
+ */}
+
+ {/*
+ */}
+ />
+ */}
-
- {/* {
data={data}
/> */}
+ {/*
{
barBorderRadius={20}
stackData={stackData}
/>
+ */}
-
- {/* Hello */}
-
+ {/* Hello */}
{/* */}
{/* {
+ const barData = [
+ {
+ value: 230,
+ label: 'Jan',
+ frontColor: '#4ABFF4',
+ sideColor: '#23A7F3',
+ topColor: '#92e6f6',
+ },
+ {
+ value: 180,
+ label: 'Feb',
+ frontColor: '#79C3DB',
+ sideColor: '#68BCD7',
+ topColor: '#9FD4E5',
+ },
+ {
+ value: 195,
+ label: 'Mar',
+ frontColor: '#28B2B3',
+ sideColor: '#0FAAAB',
+ topColor: '#66C9C9',
+ },
+ {
+ value: 250,
+ label: 'Apr',
+ frontColor: '#4ADDBA',
+ sideColor: '#36D9B2',
+ topColor: '#7DE7CE',
+ },
+ {
+ value: 320,
+ label: 'May',
+ frontColor: '#91E3E3',
+ sideColor: '#85E0E0',
+ topColor: '#B0EAEB',
+ },
+ ];
+ return (
+
+
+
+ );
+};
+
+export default BarWithGradient;
diff --git a/examples/BarChart/BarWithGradient.js b/examples/BarChart/BarWithGradient.js
new file mode 100644
index 0000000..3bdd9fb
--- /dev/null
+++ b/examples/BarChart/BarWithGradient.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import {View} from 'react-native';
+import {BarChart} from '../../src/BarChart';
+
+const BarWithGradient = () => {
+ const barData = [
+ {value: 0.7, label: '1'},
+ {value: 0.8, label: '2'},
+ {value: 0.6, label: '3'},
+ {value: 0.4, label: '4'},
+ {value: 0.9, label: '5'},
+ {value: 0.7, label: '6'},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default BarWithGradient;
diff --git a/examples/BarChart/CappedBars.js b/examples/BarChart/CappedBars.js
new file mode 100644
index 0000000..38ebb9c
--- /dev/null
+++ b/examples/BarChart/CappedBars.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View} from 'react-native';
+import {BarChart} from '../../src/BarChart';
+
+const CappedBars = () => {
+ const data = [
+ {value: 15, label: 'Jan'},
+ {value: 40, label: 'Feb'},
+ {value: 10, label: 'Mar'},
+ {value: 30, label: 'Apr'},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default CappedBars;
diff --git a/examples/BarChart/RoundStackBar.js b/examples/BarChart/RoundStackBar.js
new file mode 100644
index 0000000..38de825
--- /dev/null
+++ b/examples/BarChart/RoundStackBar.js
@@ -0,0 +1,53 @@
+import {BarChart} from '../../src/BarChart';
+import React from 'react';
+import {View} from 'react-native';
+
+const RoundStackBar = () => {
+ const stackData = [
+ {
+ stacks: [
+ {value: 10, color: 'orange'},
+ {value: 20, color: '#4ABFF4', marginBottom: 2},
+ ],
+ label: 'Jan',
+ },
+ {
+ stacks: [
+ {value: 10, color: '#4ABFF4'},
+ {value: 11, color: 'orange', marginBottom: 2},
+ {value: 15, color: '#28B2B3', marginBottom: 2},
+ ],
+ label: 'Mar',
+ },
+ {
+ stacks: [
+ {value: 14, color: 'orange'},
+ {value: 18, color: '#4ABFF4', marginBottom: 2},
+ ],
+ label: 'Feb',
+ },
+ {
+ stacks: [
+ {value: 7, color: '#4ABFF4'},
+ {value: 11, color: 'orange', marginBottom: 2},
+ {value: 10, color: '#28B2B3', marginBottom: 2},
+ ],
+ label: 'Mar',
+ },
+ ];
+ return (
+
+
+
+ );
+};
+
+export default RoundStackBar;
diff --git a/examples/BarChart/SimpleBarAnimated.js b/examples/BarChart/SimpleBarAnimated.js
new file mode 100644
index 0000000..8af4a77
--- /dev/null
+++ b/examples/BarChart/SimpleBarAnimated.js
@@ -0,0 +1,27 @@
+import {BarChart} from '../../src/BarChart';
+import React from 'react';
+import {View} from 'react-native';
+
+const SimpleBarAnimation = () => {
+ const barData = [
+ {value: 230, label: 'Jan', frontColor: '#4ABFF4'},
+ {value: 180, label: 'Feb', frontColor: '#79C3DB'},
+ {value: 195, label: 'Mar', frontColor: '#28B2B3'},
+ {value: 250, label: 'Apr', frontColor: '#4ADDBA'},
+ {value: 320, label: 'May', frontColor: '#91E3E3'},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default SimpleBarAnimation;
diff --git a/examples/BarChart/SimpleBlueBars.js b/examples/BarChart/SimpleBlueBars.js
index 8897507..110a3c5 100644
--- a/examples/BarChart/SimpleBlueBars.js
+++ b/examples/BarChart/SimpleBlueBars.js
@@ -16,8 +16,6 @@ const SimpleBlueBars = () => {
{
+ const lineData = [
+ {value: 0},
+ {value: 20},
+ {value: 18},
+ {value: 40},
+ {value: 36},
+ {value: 60},
+ {value: 54},
+ {value: 85},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default SimpleBlueLine;
diff --git a/examples/PieChart/SimplePie.js b/examples/PieChart/SimplePie.js
new file mode 100644
index 0000000..8897ace
--- /dev/null
+++ b/examples/PieChart/SimplePie.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const SimplePie = () => {
+ const pieData = [
+ {value: 54, color: '#177AD5', text: '54%'},
+ {value: 30, color: '#79D2DE', text: '30%'},
+ {value: 26, color: '#ED6665', text: '26%'},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default SimplePie;
diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx
index a56ae6c..9e11245 100644
--- a/src/BarChart/RenderBars.tsx
+++ b/src/BarChart/RenderBars.tsx
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
-import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native';
+import React, {Component} from 'react';
+import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
import ThreeDBar from '../Components/ThreeDBar';
import AnimatedBar from '../Components/AnimatedBar';
import LinearGradient from 'react-native-linear-gradient';
import Animated2DWithGradient from './Animated2DWithGradient';
-import { Style } from 'util';
+import {Style} from 'util';
type Props = {
style?: any;
@@ -29,6 +29,7 @@ type Props = {
spacing?: number;
data?: any;
barWidth?: number;
+ sideWidth?: number;
isThreeD?: Boolean;
isAnimated?: Boolean;
@@ -54,7 +55,7 @@ type Props = {
xAxisIndicesColor: ColorValue;
horizontal: Boolean;
intactTopLabel: Boolean;
- barBorderRadius?: number
+ barBorderRadius?: number;
};
type itemType = {
value?: number;
@@ -66,6 +67,7 @@ type itemType = {
gradientColor?: any;
label?: String;
barWidth?: number;
+ sideWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
@@ -74,7 +76,7 @@ type itemType = {
capColor?: ColorValue;
capRadius?: number;
labelComponent?: Function;
- barBorderRadius?: number
+ barBorderRadius?: number;
};
const RenderBars = (props: Props) => {
const {
@@ -106,21 +108,21 @@ const RenderBars = (props: Props) => {
},
rotateLabel
? props.horizontal
- ? { transform: [{ rotate: '330deg' }] }
- : { transform: [{ rotate: '60deg' }] }
+ ? {transform: [{rotate: '330deg'}]}
+ : {transform: [{rotate: '60deg'}]}
: props.horizontal
- ? { transform: [{ rotate: '-90deg' }] }
- : {},
+ ? {transform: [{rotate: '-90deg'}]}
+ : {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
-
- {label || ''}
-
- )}
+
+ {label || ''}
+
+ )}
);
};
@@ -137,21 +139,21 @@ const RenderBars = (props: Props) => {
},
rotateLabel
? props.horizontal
- ? { transform: [{ rotate: '330deg' }] }
- : { transform: [{ rotate: '60deg' }] }
+ ? {transform: [{rotate: '330deg'}]}
+ : {transform: [{rotate: '60deg'}]}
: props.horizontal
- ? { transform: [{ rotate: '-90deg' }] }
- : {},
+ ? {transform: [{rotate: '-90deg'}]}
+ : {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
-
- {label || ''}
-
- )}
+
+ {label || ''}
+
+ )}
);
};
@@ -166,7 +168,7 @@ const RenderBars = (props: Props) => {
position: 'absolute',
width: '100%',
height: '100%',
- borderRadius: props.barBorderRadius || item.barBorderRadius || 0
+ borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
@@ -189,8 +191,8 @@ const RenderBars = (props: Props) => {
borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
},
]}
- start={{ x: 0, y: 0 }}
- end={{ x: 0, y: 1 }}
+ start={{x: 0, y: 0}}
+ end={{x: 0, y: 1}}
colors={[
item.gradientColor || props.gradientColor || 'white',
item.frontColor || props.frontColor || 'black',
@@ -232,7 +234,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center',
},
props.horizontal &&
- !props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
+ !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
@@ -253,7 +255,7 @@ const RenderBars = (props: Props) => {
width: '100%',
height: '100%',
backgroundColor: item.frontColor || props.frontColor || 'black',
- borderRadius: props.barBorderRadius || item.barBorderRadius || 0
+ borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
@@ -313,7 +315,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center',
},
props.horizontal &&
- !props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
+ !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
@@ -337,7 +339,7 @@ const RenderBars = (props: Props) => {
},
// !isThreeD && !item.showGradient && !props.showGradient &&
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
- side !== 'right' && { zIndex: data.length - index },
+ side !== 'right' && {zIndex: data.length - index},
]}>
{props.showVerticalLines && (
{
{
horizontal={props.horizontal}
/>
) : (
-
- )
+
+ )
) : item.showGradient || props.showGradient ? (
isAnimated ? (
{
barBorderRadius={props.barBorderRadius || 0}
/>
) : (
- static2DWithGradient(item)
- )
+ static2DWithGradient(item)
+ )
) : isAnimated ? (
{
barBorderRadius={props.barBorderRadius || 0}
/>
) : (
- static2DSimple(item)
- )}
+ static2DSimple(item)
+ )}
{isAnimated
? renderAnimatedLabel(item.label || '', item.labelTextStyle)
: renderLabel(item.label || '', item.labelTextStyle)}
diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx
index b7145ab..8367d09 100644
--- a/src/BarChart/RenderStackBars.tsx
+++ b/src/BarChart/RenderStackBars.tsx
@@ -1,217 +1,213 @@
-import React, { Component } from 'react';
-import { View, TouchableOpacity, Text, ColorValue } from 'react-native';
-import { Style } from 'util';
+import React, {Component} from 'react';
+import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
+import {Style} from 'util';
type Props = {
- style?: any;
- width?: number;
- height?: number;
- color?: ColorValue;
- topLabelComponent?: Component;
- topLabelContainerStyle?: Style;
- opacity?: number;
- labelTextStyle?: any;
- disablePress?: boolean;
+ style?: any;
+ width?: number;
+ height?: number;
+ color?: ColorValue;
+ topLabelComponent?: Component;
+ topLabelContainerStyle?: Style;
+ opacity?: number;
+ labelTextStyle?: any;
+ disablePress?: boolean;
- item: itemType;
- index: number;
- containerHeight?: number;
- maxValue: number;
- spacing?: number;
- data?: any;
- barWidth?: number;
+ item: itemType;
+ index: number;
+ containerHeight?: number;
+ maxValue: number;
+ spacing?: number;
+ data?: any;
+ barWidth?: number;
- rotateLabel?: Boolean;
- showVerticalLines: Boolean;
- verticalLinesThickness: number;
- verticalLinesColor: ColorValue;
- verticalLinesZIndex: number;
- showXAxisIndices: Boolean;
- xAxisIndicesHeight: number;
- xAxisIndicesWidth: number;
- xAxisIndicesColor: ColorValue;
- horizontal: Boolean;
- intactTopLabel: Boolean;
- barBorderRadius?: number
+ rotateLabel?: Boolean;
+ showVerticalLines: Boolean;
+ verticalLinesThickness: number;
+ verticalLinesColor: ColorValue;
+ verticalLinesZIndex: number;
+ showXAxisIndices: Boolean;
+ xAxisIndicesHeight: number;
+ xAxisIndicesWidth: number;
+ xAxisIndicesColor: ColorValue;
+ horizontal: Boolean;
+ intactTopLabel: Boolean;
+ barBorderRadius?: number;
};
type itemType = {
- value?: number;
- onPress?: any;
- label?: String;
- barWidth?: number;
- labelTextStyle?: any;
- topLabelComponent?: Function;
- topLabelContainerStyle?: any;
- disablePress?: any;
- capThickness?: number;
- capColor?: ColorValue;
- capRadius?: number;
- labelComponent?: Function;
- borderRadius?: number;
- stacks?: Array
+ value?: number;
+ onPress?: any;
+ label?: String;
+ barWidth?: number;
+ labelTextStyle?: any;
+ topLabelComponent?: Function;
+ topLabelContainerStyle?: any;
+ disablePress?: any;
+ capThickness?: number;
+ capColor?: ColorValue;
+ capRadius?: number;
+ labelComponent?: Function;
+ borderRadius?: number;
+ stacks?: Array;
};
const RenderStackBars = (props: Props) => {
- const {
- item,
- containerHeight,
- maxValue,
- spacing,
- rotateLabel,
- } = props;
- const disablePress = props.disablePress || false;
- const renderLabel = (label: String, labelTextStyle: any) => {
- return (
-
- {item.labelComponent ? (
- item.labelComponent()
- ) : (
-
- {label || ''}
-
- )}
-
- );
- };
-
- const getPosition = (index: number) => {
- let position = 0;
- for (let i = 0; i < index; i++) {
- position += (props.item.stacks[i].value * (containerHeight || 200)) / (maxValue || 200)
- }
- return position;
- }
-
- const getTotalHeight = () => {
- return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0)
- }
-
-
-
- const static2DSimple = (item: itemType) => {
- // console.log('comes to static2DSimple', item);
- return (
- <>
-
- {
- item.stacks.map((stackItem, index) => {
- return (
-
- )
- })
- }
-
-
- {item.topLabelComponent && (
-
- {item.topLabelComponent()}
-
- )}
-
- );
- };
-
+ const {item, containerHeight, maxValue, spacing, rotateLabel} = props;
+ const disablePress = props.disablePress || false;
+ const renderLabel = (label: String, labelTextStyle: any) => {
return (
-
- {props.showVerticalLines && (
-
- )}
- {props.showXAxisIndices && (
-
- )}
- {
- static2DSimple(item)
- }
- {renderLabel(item.label || '', item.labelTextStyle)}
-
+
+ {item.labelComponent ? (
+ item.labelComponent()
+ ) : (
+
+ {label || ''}
+
+ )}
+
);
+ };
+
+ const getPosition = (index: number) => {
+ let position = 0;
+ for (let i = 0; i < index; i++) {
+ position +=
+ (props.item.stacks[i].value * (containerHeight || 200)) /
+ (maxValue || 200);
+ }
+ return position;
+ };
+
+ const getTotalHeight = () => {
+ return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0);
+ };
+
+ const static2DSimple = (item: itemType) => {
+ // console.log('comes to static2DSimple', item);
+ return (
+ <>
+
+ {item.stacks.map((stackItem, index) => {
+ return (
+
+ );
+ })}
+
+ {item.topLabelComponent && (
+
+ {item.topLabelComponent()}
+
+ )}
+
+ );
+ };
+
+ return (
+
+ {props.showVerticalLines && (
+
+ )}
+ {props.showXAxisIndices && (
+
+ )}
+ {static2DSimple(item)}
+ {renderLabel(item.label || '', item.labelTextStyle)}
+
+ );
};
export default RenderStackBars;
diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
index dd5316f..0fe0220 100644
--- a/src/BarChart/index.tsx
+++ b/src/BarChart/index.tsx
@@ -30,6 +30,7 @@ type PropTypes = {
hideYAxisText?: Boolean;
initialSpacing?: number;
barWidth?: number;
+ sideWidth?: number;
cappedBars?: Boolean;
capThickness?: number;
@@ -55,6 +56,7 @@ type PropTypes = {
yAxisIndicesColor?: ColorValue;
showFractionalValues?: Boolean;
+ roundToDigits?: number;
backgroundColor?: ColorValue;
disableScroll?: Boolean;
@@ -92,6 +94,7 @@ type itemType = {
gradientColor?: any;
label?: String;
barWidth?: number;
+ sideWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
@@ -111,7 +114,7 @@ export const BarChart = (props: PropTypes) => {
let maxItem = 0;
if (props.stackData) {
props.stackData.forEach(stackItem => {
- console.log('stackItem', stackItem);
+ // console.log('stackItem', stackItem);
let stackSum = stackItem.stacks.reduce(
(acc, stack) => acc + stack.value,
0,
@@ -122,6 +125,7 @@ export const BarChart = (props: PropTypes) => {
}
totalWidth +=
(stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
+ // console.log('totalWidth for stack===', totalWidth);
});
} else {
data.forEach((item: itemType) => {
@@ -129,9 +133,17 @@ export const BarChart = (props: PropTypes) => {
maxItem = item.value;
}
totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
+ // console.log('totalWidth for bar===', totalWidth);
});
}
- maxItem = maxItem + (10 - (maxItem % 10));
+ if (props.showFractionalValues || props.roundToDigits) {
+ maxItem *= 10 * (props.roundToDigits || 1);
+ maxItem = maxItem + (10 - (maxItem % 10));
+ maxItem /= 10 * (props.roundToDigits || 1);
+ maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
+ } else {
+ maxItem = maxItem + (10 - (maxItem % 10));
+ }
const maxValue = props.maxValue || maxItem;
@@ -193,7 +205,11 @@ export const BarChart = (props: PropTypes) => {
horizSections.pop();
for (let i = 0; i <= noOfSections; i++) {
- horizSections.push({value: maxValue - stepValue * i});
+ let value = maxValue - stepValue * i;
+ if (props.showFractionalValues || props.roundToDigits) {
+ value = parseFloat(value.toFixed(props.roundToDigits || 1));
+ }
+ horizSections.push({value});
}
const heightValue = new Animated.Value(0);
@@ -271,7 +287,11 @@ export const BarChart = (props: PropTypes) => {
},
]}>
{showFractionalValues
- ? sectionItems.value || ''
+ ? sectionItems.value
+ ? sectionItems.value
+ : hideOrigin
+ ? ''
+ : '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: hideOrigin
@@ -365,8 +385,8 @@ export const BarChart = (props: PropTypes) => {
data={props.stackData || data}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
- console.log('index--->', index);
- console.log('itemhere--->', item);
+ // console.log('index--->', index);
+ // console.log('itemhere--->', item);
if (props.stackData) {
return (
{
side={side}
data={data}
barWidth={props.barWidth}
+ sideWidth={props.sideWidth}
opacity={opacity}
isThreeD={isThreeD}
isAnimated={isAnimated}
diff --git a/src/Components/AnimatedBar/index.tsx b/src/Components/AnimatedBar/index.tsx
index c71780b..8ec2c95 100644
--- a/src/Components/AnimatedBar/index.tsx
+++ b/src/Components/AnimatedBar/index.tsx
@@ -18,6 +18,7 @@ type trianglePropTypes = {
type animatedBarPropTypes = {
animationDuration: number;
width: number;
+ sideWidth?: number;
height: number;
showGradient: Boolean;
gradientColor: any;
@@ -96,6 +97,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
};
const width = props.width;
+ const sideWidth = props.sideWidth;
const showGradient = props.showGradient || false;
const gradientColor = props.gradientColor || 'white';
@@ -118,55 +120,36 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{opacity: opacity, position: 'absolute', bottom: 0},
props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
- {props.height ? (
-
-
-
-
-
- ) : null}
-
{/******************* Top View *****************/}
{props.height ? (
<>
-
+
-
+
+ style={{
+ position: 'absolute',
+ top: sideWidth / -2,
+ left: width,
+ }}>
@@ -175,6 +158,29 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{/*******************************************************************/}
+ {props.height ? (
+
+
+
+
+
+ ) : null}
+
{
- const width = props.width || 40;
- const height = props.height || 200;
+ const width = props.width;
+ const sideWidth = props.sideWidth;
+ const height = props.height;
const showGradient = props.showGradient || false;
const gradientColor = props.gradientColor || 'white';
@@ -77,57 +79,58 @@ const ThreeDBar = (props: PropTypes) => {
styles.row,
props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
-
+ {/******************* Top View *****************/}
+
+
+
+
+
+
+
+
+
+
+
+ {/*******************************************************************/}
+
+
- {/******************* Top View *****************/}
-
-
-
-
-
-
-
-
-
-
-
- {/*******************************************************************/}
-
{
}
totalWidth += spacing;
});
- maxItem = maxItem + (10 - (maxItem % 10));
+ if (props.showFractionalValues || props.roundToDigits) {
+ maxItem *= 10 * (props.roundToDigits || 1);
+ maxItem = maxItem + (10 - (maxItem % 10));
+ maxItem /= 10 * (props.roundToDigits || 1);
+ maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
+ } else {
+ maxItem = maxItem + (10 - (maxItem % 10));
+ }
const maxValue = props.maxValue || maxItem;
@@ -273,7 +281,11 @@ export const LineChart = (props: propTypes) => {
// console.log('data', data);
horizSections.pop();
for (let i = 0; i <= noOfSections; i++) {
- horizSections.push({value: maxValue - stepValue * i});
+ let value = maxValue - stepValue * i;
+ if (props.showFractionalValues || props.roundToDigits) {
+ value = parseFloat(value.toFixed(props.roundToDigits || 1));
+ }
+ horizSections.push({value});
}
useEffect(() => {
@@ -540,7 +552,6 @@ export const LineChart = (props: propTypes) => {
});
const decreaseWidth = () => {
- // console.log('i m called, totalWidth is', totalWidth)
widthValue.setValue(0);
Animated.timing(widthValue, {
toValue: 1,
@@ -589,7 +600,7 @@ export const LineChart = (props: propTypes) => {
{props.hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
return (
-
+
{
},
]}>
{showFractionalValues
- ? sectionItems.value || ''
+ ? sectionItems.value
+ ? sectionItems.value
+ : hideOrigin
+ ? ''
+ : '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: hideOrigin
@@ -633,7 +648,7 @@ export const LineChart = (props: propTypes) => {
{index === noOfSections ? (
diff --git a/src/LineChart/styles.tsx b/src/LineChart/styles.tsx
index 964ba74..0046671 100644
--- a/src/LineChart/styles.tsx
+++ b/src/LineChart/styles.tsx
@@ -8,7 +8,6 @@ export const styles = StyleSheet.create({
},
horizBar: {
flexDirection: 'row',
- width: '90%',
},
leftLabel: {
justifyContent: 'center',
diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
index cb3239a..c151404 100644
--- a/src/PieChart/index.tsx
+++ b/src/PieChart/index.tsx
@@ -29,6 +29,8 @@ type propTypes = {
textBackgroundColor?: string;
textBackgroundRadius?: number;
showValuesAsLabels?: Boolean;
+
+ centerLabelComponent?: Function;
};
type itemType = {
value: number;
@@ -228,8 +230,18 @@ export const PieChart = (props: propTypes) => {
}
if (showTextBackground && (dataItem.text || showValuesAsLabels)) {
- let textBackgroundX = xx + textSize / 2;
- let textBackgroundY = yy - textSize / 2 + 1;
+ let textBackgroundX =
+ xx +
+ (props.textBackgroundRadius ||
+ dataItem.textBackgroundRadius ||
+ textSize) /
+ 2;
+ let textBackgroundY =
+ yy -
+ (props.textBackgroundRadius ||
+ dataItem.textBackgroundRadius ||
+ textSize) /
+ 3;
ctx.beginPath();
ctx.arc(
textBackgroundX,
@@ -265,7 +277,7 @@ export const PieChart = (props: propTypes) => {
return (
- {visibility && donut && !isDataShifted && (
+ {visibility && (props.centerLabelComponent || (donut && !isDataShifted)) && (
{
borderWidth: innerCircleBorderWidth,
borderColor: innerCircleBorderColor,
backgroundColor: innerCircleColor,
+ justifyContent: 'center',
+ alignItems: 'center',
},
isThreeD && {
borderTopWidth: innerCircleBorderWidth * 5,
@@ -289,8 +303,9 @@ export const PieChart = (props: propTypes) => {
? innerCircleBorderWidth * 2
: innerCircleBorderWidth,
},
- ]}
- />
+ ]}>
+ {props.centerLabelComponent ? props.centerLabelComponent() : null}
+
)}
);