react-native-gifted-charts 1.0.0 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -51,6 +51,7 @@
     "react-native": "*"
   },
   "keywords": [
+    "react-native",
     "chart",
     "charts",
     "graph",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -223,12 +223,13 @@ const Animated2DWithGradient = (props: propTypes) => {
                   height: item.barWidth || 30,
                   width: item.barWidth || 30,
                   justifyContent:
-                    props.horizontal && !props.intactTopLabel
+                    (props.horizontal && !props.intactTopLabel) || item.value < 0
                       ? 'center'
                       : 'flex-end',
                   alignItems: 'center',
                   opacity: opacity,
                 },
+                item.value < 0 && {transform:[{rotate:'180deg'}]},
                 props.horizontal &&
                   !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                 item.topLabelContainerStyle,
@@ -242,4 +243,4 @@ const Animated2DWithGradient = (props: propTypes) => {
   );
 };
 
-export default Animated2DWithGradient;
+export default Animated2DWithGradient;

package/src/BarChart/RenderBars.tsx

@@ -57,6 +57,7 @@ type Props = {
   horizontal: Boolean;
   intactTopLabel: Boolean;
   barBorderRadius?: number;
+  autoShiftLabels?: Boolean;
 };
 type itemType = {
   value?: number;
@@ -99,8 +100,9 @@ const RenderBars = (props: Props) => {
     appearingOpacity,
     opacity,
     animationDuration,
+    autoShiftLabels,
   } = props;
-  const renderLabel = (label: String, labelTextStyle: any) => {
+  const renderLabel = (label: String, labelTextStyle: any, value: number) => {
     return (
       <View
         style={[
@@ -119,10 +121,12 @@ const RenderBars = (props: Props) => {
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
-              : {transform: [{rotate: '60deg'}]}
+              : {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
             : props.horizontal
             ? {transform: [{rotate: '-90deg'}]}
-            : {},
+            : value < 0
+            ?{transform:[{rotate:'180deg'},{translateY:autoShiftLabels?0:32}]}
+            :{},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -137,7 +141,7 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const renderAnimatedLabel = (label: String, labelTextStyle: any) => {
+  const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
     return (
       <Animated.View
         style={[
@@ -150,9 +154,11 @@ const RenderBars = (props: Props) => {
                 30) +
               spacing / 2,
             position: 'absolute',
+            left: -4,
             bottom: rotateLabel ? -40 : -25,
             opacity: appearingOpacity,
           },
+          value < 0 && {transform:[{rotate:'180deg'}]},
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
@@ -244,11 +250,12 @@ const RenderBars = (props: Props) => {
                 height: item.barWidth || props.barWidth || 30,
                 width: item.barWidth || props.barWidth || 30,
                 justifyContent:
-                  props.horizontal && !props.intactTopLabel
+                  (props.horizontal && !props.intactTopLabel) || item.value < 0
                     ? 'center'
                     : 'flex-end',
                 alignItems: 'center',
               },
+              item.value < 0 && {transform:[{rotate:'180deg'}]},
               props.horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
@@ -270,12 +277,13 @@ const RenderBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.barWidth || props.barWidth || 30,
-          height: item.topLabelComponent
+          height: item.value>=0 &&(!isThreeD || isAnimated) && item.topLabelComponent
             ? (item.topLabelComponentHeight || 30) +
-              (item.value * (containerHeight || 200)) / (maxValue || 200)
-            : (item.value * (containerHeight || 200)) / (maxValue || 200),
+              (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
+            : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200),
           marginRight: spacing,
         },
+        item.value < 0 && {transform:[{translateY:(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)},{rotateZ:'180deg'}]},
         // !isThreeD && !item.showGradient && !props.showGradient &&
         // { backgroundColor: item.frontColor || props.frontColor || 'black' },
         side !== 'right' && {zIndex: data.length - index},
@@ -325,7 +333,7 @@ const RenderBars = (props: Props) => {
             topLabelComponent={item.topLabelComponent}
             opacity={opacity || 1}
             animationDuration={animationDuration || 800}
-            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
+            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
           />
@@ -350,7 +358,8 @@ const RenderBars = (props: Props) => {
             opacity={opacity || 1}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
+            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            value={item.value}
           />
         )
       ) : item.showGradient || props.showGradient ? (
@@ -364,7 +373,7 @@ const RenderBars = (props: Props) => {
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
             frontColor={props.frontColor || 'black'}
-            height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
+            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -387,7 +396,7 @@ const RenderBars = (props: Props) => {
           gradientColor={props.gradientColor}
           noGradient
           frontColor={props.frontColor || 'black'}
-          height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
+          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -408,7 +417,7 @@ const RenderBars = (props: Props) => {
           noGradient
           noAnimation
           frontColor={props.frontColor || 'black'}
-          height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
+          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -419,10 +428,10 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle)
-        : renderLabel(item.label || '', item.labelTextStyle)}
+        ? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
+        : renderLabel(item.label || '', item.labelTextStyle,item.value)}
     </TouchableOpacity>
   );
 };
 
-export default RenderBars;
+export default RenderBars;

package/src/BarChart/RenderStackBars.tsx

@@ -33,6 +33,7 @@ type Props = {
   horizontal: Boolean;
   intactTopLabel: Boolean;
   barBorderRadius?: number;
+  xAxisThickness: number;
 };
 type itemType = {
   value?: number;
@@ -51,7 +52,7 @@ type itemType = {
   stacks?: Array<any>;
 };
 const RenderStackBars = (props: Props) => {
-  const {item, containerHeight, maxValue, spacing, rotateLabel} = props;
+  const {item, containerHeight, maxValue, spacing, rotateLabel,xAxisThickness} = props;
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
     return (
@@ -60,7 +61,6 @@ const RenderStackBars = (props: Props) => {
           {
             width:
               (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
-            left: -6,
             position: 'absolute',
             bottom: rotateLabel ? -40 : -25,
           },
@@ -87,18 +87,16 @@ const RenderStackBars = (props: Props) => {
     let position = 0;
     for (let i = 0; i < index; i++) {
       position +=
-        (props.item.stacks[i].value * (containerHeight || 200)) /
+        (Math.abs(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 totalHeight = props.item.stacks.reduce((acc, stack) => acc + Math.abs(stack.value) * (containerHeight || 200) / (maxValue || 200), 0)
 
   const static2DSimple = (item: itemType) => {
-    // console.log('comes to static2DSimple', item);
+    const cotainsNegative = item.stacks.some(item => item.value < 0)
     return (
       <>
         <View
@@ -108,6 +106,11 @@ const RenderStackBars = (props: Props) => {
               width: item.stacks[0].barWidth || props.barWidth || 30,
               height: '100%',
             },
+            cotainsNegative && {
+              transform: [
+                {translateY: totalHeight + xAxisThickness / 2},
+                {rotate:'180deg'}
+              ]}
           ]}>
           {item.stacks.map((stackItem, index) => {
             return (
@@ -121,7 +124,7 @@ const RenderStackBars = (props: Props) => {
                     bottom: getPosition(index) + (stackItem.marginBottom || 0),
                     width: '100%',
                     height:
-                      (stackItem.value * (containerHeight || 200)) /
+                      (Math.abs(stackItem.value) * (containerHeight || 200)) /
                         (maxValue || 200) -
                       (stackItem.marginBottom || 0),
                     backgroundColor: stackItem.color || 'black',
@@ -147,15 +150,13 @@ const RenderStackBars = (props: Props) => {
             style={[
               {
                 position: 'absolute',
-                top: (item.barWidth || props.barWidth || 30) * -1,
+                top: cotainsNegative ? 0 : (item.barWidth || props.barWidth || 30) * -1,
                 height: item.barWidth || props.barWidth || 30,
                 width: item.barWidth || props.barWidth || 30,
-                justifyContent:
-                  props.horizontal && !props.intactTopLabel
-                    ? 'center'
-                    : 'flex-end',
+                justifyContent: 'center',
                 alignItems: 'center',
               },
+              cotainsNegative && {transform: [{translateY: totalHeight * 2}]},
               props.horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
@@ -174,7 +175,7 @@ const RenderStackBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.stacks[0].barWidth || props.barWidth || 30,
-          height: getTotalHeight(),
+          height: totalHeight,
           marginRight: spacing,
         },
       ]}>

package/src/BarChart/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useMemo,
   useState,
+  useRef,
 } from 'react';
 import {
   View,
@@ -24,7 +25,9 @@ type PropTypes = {
   width?: number;
   height?: number;
   noOfSections?: number;
+  noOfSectionsBelowXAxis?: number;
   maxValue?: number;
+  minValue?: number;
   stepHeight?: number;
   stepValue?: number;
   spacing?: number;
@@ -44,6 +47,7 @@ type PropTypes = {
   yAxisTextStyle?: any;
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
+  yAxisSide?: string;
   initialSpacing?: number;
   barWidth?: number;
   sideWidth?: number;
@@ -114,6 +118,9 @@ type PropTypes = {
   yAxisLabelTexts?: Array<string>;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
+  autoShiftLabels?: Boolean;
+  scrollToEnd?: Boolean;
+  scrollAnimation?: Boolean;
 };
 type lineConfigType = {
   curved?: Boolean;
@@ -164,6 +171,7 @@ type itemType = {
 };
 
 export const BarChart = (props: PropTypes) => {
+  const scrollRef = useRef();
   const [points, setPoints] = useState('');
   const showLine = props.showLine || false;
   const defaultLineConfig = {
@@ -216,13 +224,16 @@ export const BarChart = (props: PropTypes) => {
   const containerHeight = props.height || 200;
   const noOfSections = props.noOfSections || 10;
   const horizSections = [{value: '0'}];
+  const horizSectionsBelow = [];
   const stepHeight = props.stepHeight || containerHeight / noOfSections;
   const data = useMemo(() => props.data || [], [props.data]);
   const spacing = props.spacing === 0 ? 0 : props.spacing ? props.spacing : 20;
   const labelWidth = props.labelWidth || 0;
+  const scrollToEnd = props.scrollToEnd || false;
+  const scrollAnimation = props.scrollAnimation === false ? false : true;
 
   let totalWidth = spacing;
-  let maxItem = 0;
+  let maxItem = 0, minItem = 0;
   if (props.stackData) {
     props.stackData.forEach(stackItem => {
       // console.log('stackItem', stackItem);
@@ -234,6 +245,9 @@ export const BarChart = (props: PropTypes) => {
       if (stackSum > maxItem) {
         maxItem = stackSum;
       }
+      if(stackSum < minItem){
+        minItem = stackSum;
+      }
       totalWidth +=
         (stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
       // console.log('totalWidth for stack===', totalWidth);
@@ -243,6 +257,9 @@ export const BarChart = (props: PropTypes) => {
       if (item.value > maxItem) {
         maxItem = item.value;
       }
+      if(item.value < minItem){
+        minItem = item.value;
+      }
       totalWidth +=
         (item.barWidth || props.barWidth || 30) +
         (item.spacing === 0 ? 0 : item.spacing || spacing);
@@ -254,13 +271,24 @@ export const BarChart = (props: PropTypes) => {
     maxItem = maxItem + (10 - (maxItem % 10));
     maxItem /= 10 * (props.roundToDigits || 1);
     maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
+    if(minItem !== 0){
+      minItem *= 10 * (props.roundToDigits || 1);
+      minItem = minItem - (10 + (minItem % 10));
+      minItem /= 10 * (props.roundToDigits || 1);
+      minItem = parseFloat(minItem.toFixed(props.roundToDigits || 1));
+    }
   } else {
     maxItem = maxItem + (10 - (maxItem % 10));
+    if(minItem !== 0){
+      minItem = minItem - (10 + (minItem % 10))
+    }
   }
 
   const maxValue = props.maxValue || maxItem;
+  const minValue = props.minValue || minItem;
 
   const stepValue = props.stepValue || maxValue / noOfSections;
+  const noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis || (-minValue / stepValue);
   const disableScroll = props.disableScroll || false;
   const showScrollIndicator = props.showScrollIndicator || false;
   const initialSpacing =
@@ -294,6 +322,7 @@ export const BarChart = (props: PropTypes) => {
 
   const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
   const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
+  const yAxisSide = props.yAxisSide || 'left';
 
   const xAxisThickness =
     props.xAxisThickness === 0
@@ -326,6 +355,7 @@ export const BarChart = (props: PropTypes) => {
   const heightValue = useMemo(() => new Animated.Value(0), []);
   const opacValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
+  const autoShiftLabels = props.autoShiftLabels || false;
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);
@@ -505,6 +535,19 @@ export const BarChart = (props: PropTypes) => {
         : value.toString(),
     });
   }
+  if(noOfSectionsBelowXAxis){
+    for (let i = 1; i <= noOfSectionsBelowXAxis; i++) {
+      let value = stepValue * -i;
+      if (props.showFractionalValues || props.roundToDigits) {
+        value = parseFloat(value.toFixed(props.roundToDigits || 1));
+      }
+      horizSectionsBelow.push({
+        value: props.yAxisLabelTexts
+        ? props.yAxisLabelTexts[noOfSectionsBelowXAxis - i] ?? value.toString()
+        : value.toString(),
+      })
+    }
+  }
 
   const animatedHeight = heightValue.interpolate({
     inputRange: [0, 1],
@@ -557,6 +600,7 @@ export const BarChart = (props: PropTypes) => {
                     ? props.width || totalWidth
                     : props.width || totalWidth + 11,
                 },
+                yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
               ]}>
               <View
                 style={[
@@ -582,12 +626,13 @@ export const BarChart = (props: PropTypes) => {
                     style={[
                       yAxisTextStyle,
                       index === noOfSections && {marginBottom: stepHeight / -2},
-                      horizontal && {
+                      horizontal ? {
                         transform: [
                           {rotate: '270deg'},
                           {translateY: yAxisAtTop ? 0 : 50},
                         ],
-                      },
+                      }:
+                      yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
                     ]}>
                     {label}
                   </Text>
@@ -683,6 +728,81 @@ export const BarChart = (props: PropTypes) => {
             </View>
           );
         })}
+        {horizSectionsBelow.map((sectionItems, index) => {
+          let label = getLabel(sectionItems.value);
+          if (hideOrigin && index === horizSections.length - 1) {
+            label = '';
+          }
+          return (
+            <View
+              key={index}
+              style={[
+                styles.horizBar,
+                {
+                  width: horizontal
+                    ? props.width || totalWidth
+                    : props.width || totalWidth + 11,
+                },
+                index===0&&{marginTop:stepHeight/2}
+              ]}>
+              <View
+                style={[
+                  styles.leftLabel,
+                  {
+                    borderRightWidth: yAxisThickness,
+                    borderColor: yAxisColor,
+                  },
+                  horizontal &&
+                    !yAxisAtTop && {
+                      transform: [{translateX: totalWidth + yAxisThickness}],
+                    },
+                  {
+                    height: index===0?stepHeight*1.5:stepHeight,
+                    width: yAxisLabelWidth,
+                  },
+                  index===0&&{marginTop:-stepHeight/2}
+                ]}>
+                {!hideYAxisText ? (
+                  <Text
+                    numberOfLines={1}
+                    ellipsizeMode={'clip'}
+                    style={[
+                      yAxisTextStyle,
+                      index === 0 && {marginBottom: stepHeight / -2},
+                      horizontal && {
+                        transform: [
+                          {rotate: '270deg'},
+                          {translateY: yAxisAtTop ? 0 : 50},
+                        ],
+                      },
+                    ]}>
+                    {label}
+                  </Text>
+                ) : null}
+              </View>
+              <View
+                style={[
+                   styles.leftPart,
+                   {backgroundColor: backgroundColor},
+                ]}>
+                {hideRules ? null : (
+                  <Rule
+                    config={{
+                      thickness: rulesThickness,
+                      color: rulesColor,
+                      width: horizontal
+                        ? props.width || totalWidth
+                        : (props.width || totalWidth) + 11,
+                      dashWidth: dashWidth,
+                      dashGap: dashGap,
+                      type: rulesType,
+                    }}
+                  />
+                )}
+              </View>
+            </View>
+          )
+        })}
       </>
     );
   };
@@ -975,16 +1095,23 @@ export const BarChart = (props: PropTypes) => {
       style={[
         styles.container,
         {
-          height: containerHeight,
+          height: containerHeight + horizSectionsBelow.length * stepHeight,
         },
+        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness },
         props.width && {width: props.width},
         horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
       ]}>
       {props.hideAxesAndRules !== true && renderHorizSections()}
       <ScrollView
+        ref={scrollRef}
+        onContentSizeChange={()=>{
+          if(scrollRef.current && scrollToEnd){        
+            scrollRef.current.scrollToEnd({animated: scrollAnimation});
+          }
+        }}
         style={[
           {
-            marginLeft: yAxisLabelWidth,
+            marginLeft: yAxisSide === 'right' ? -yAxisLabelWidth+10 : yAxisLabelWidth,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },
@@ -995,8 +1122,9 @@ export const BarChart = (props: PropTypes) => {
         contentContainerStyle={[
           {
             // backgroundColor: 'yellow',
-            height: containerHeight + 130,
+            height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
             paddingLeft: initialSpacing,
+            paddingBottom:horizSectionsBelow.length * stepHeight,
             alignItems: 'flex-end',
           },
           !props.width && {width: totalWidth},
@@ -1021,6 +1149,7 @@ export const BarChart = (props: PropTypes) => {
                     containerHeight={containerHeight}
                     maxValue={maxValue}
                     spacing={spacing}
+                    xAxisThickness={xAxisThickness}
                     barWidth={props.barWidth}
                     opacity={opacity}
                     disablePress={props.disablePress}
@@ -1083,10 +1212,11 @@ export const BarChart = (props: PropTypes) => {
                   horizontal={horizontal}
                   intactTopLabel={intactTopLabel}
                   barBorderRadius={props.barBorderRadius}
+                  autoShiftLabels={autoShiftLabels}
                 />
               ))}
         </Fragment>
       </ScrollView>
     </View>
   );
-};
+};

package/src/Components/AnimatedBar/index.tsx

@@ -87,7 +87,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   const elevate = () => {
     LayoutAnimation.configureNext({
       duration: animationDuration,
-      update: {type: 'linear', property: 'scaleXY'},
+      update: {type: 'linear', property: 'scaleY'},
     });
     setHeight(props.height);
   };
@@ -95,7 +95,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   const layoutAppear = () => {
     LayoutAnimation.configureNext({
       duration: Platform.OS == 'ios' ? animationDuration : 20,
-      create: {type: 'linear', property: 'scaleXY'},
+      create: {type: 'linear', property: 'scaleY'},
       // update: { type: 'linear' }
     });
     setInitialRender(false);
@@ -237,4 +237,4 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   );
 };
 
-export default AnimatedBar;
+export default AnimatedBar;

package/src/Components/ThreeDBar/index.tsx

@@ -20,6 +20,7 @@ type PropTypes = {
   side: String;
   horizontal: Boolean;
   intactTopLabel: Boolean;
+  value: number;
 };
 
 type TriangleProps = {
@@ -59,6 +60,7 @@ const ThreeDBar = (props: PropTypes) => {
   const width = props.width;
   const sideWidth = props.sideWidth;
   const height = props.height;
+  const value = props.value;
 
   const showGradient = props.showGradient || false;
   const gradientColor = props.gradientColor || 'white';
@@ -160,12 +162,13 @@ const ThreeDBar = (props: PropTypes) => {
           style={[
             {
               position: 'absolute',
-              top: width * -2,
+              top: value < 0 ? width * -1 : width * -2,
               height: (width * 3) / 2,
               width: width,
               justifyContent: 'flex-end',
               alignItems: 'center',
             },
+            value < 0 && {transform:[{rotate:'180deg'}]},
             props.horizontal &&
               !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
             props.side === 'right'
@@ -182,4 +185,4 @@ const ThreeDBar = (props: PropTypes) => {
   );
 };
 
-export default ThreeDBar;
+export default ThreeDBar;

package/src/LineChart/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useMemo,
   useState,
+  useRef,
 } from 'react';
 import {
   View,
@@ -100,6 +101,7 @@ type propTypes = {
   xAxisIndicesWidth?: number;
   xAxisIndicesColor?: ColorValue;
   yAxisIndicesColor?: ColorValue;
+  yAxisSide?: string;
 
   color?: string;
   color1?: string;
@@ -188,6 +190,8 @@ type propTypes = {
   width?: number;
   yAxisLabelPrefix?: String;
   yAxisLabelSuffix?: String;
+  scrollToEnd?: Boolean;
+  scrollAnimation?: Boolean;
 };
 type referenceConfigType = {
   thickness: number;
@@ -245,6 +249,7 @@ type sectionType = {
 };
 
 export const LineChart = (props: propTypes) => {
+  const scrollRef = useRef();
   const [points, setPoints] = useState('');
   const [points2, setPoints2] = useState('');
   const [points3, setPoints3] = useState('');
@@ -257,6 +262,8 @@ export const LineChart = (props: propTypes) => {
   let data = useMemo(() => props.data || [], [props.data]);
   const data2 = useMemo(() => props.data2 || [], [props.data2]);
   const data3 = useMemo(() => props.data3 || [], [props.data3]);
+  const scrollToEnd = props.scrollToEnd || false;
+  const scrollAnimation = props.scrollAnimation === false ? false : true;
 
   const opacValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
@@ -271,6 +278,8 @@ export const LineChart = (props: propTypes) => {
 
   const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
   const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
+  const yAxisSide = props.yAxisSide || 'left';
+
 
   if (!initialData) {
     initialData = [...data];
@@ -446,7 +455,7 @@ export const LineChart = (props: propTypes) => {
   const xAxisThickness = props.xAxisThickness || 1;
   const xAxisColor = props.xAxisColor || 'black';
 
-  let totalWidth = spacing;
+  let totalWidth = initialSpacing;
   let maxItem = 0;
   data.forEach((item: itemType) => {
     if (item.value > maxItem) {
@@ -1067,8 +1076,9 @@ export const LineChart = (props: propTypes) => {
                 style={[
                   styles.horizBar,
                   {
-                    width: props.width ? props.width + 15 : totalWidth,
+                    width: (props.width ? props.width : totalWidth) + 15,
                   },
+                  yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
                 ]}>
                 <View
                   style={[
@@ -1085,6 +1095,7 @@ export const LineChart = (props: propTypes) => {
                       ellipsizeMode={'clip'}
                       style={[
                         yAxisTextStyle,
+                        yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]},
                         index === noOfSections && {
                           marginBottom: stepHeight / -2,
                         },
@@ -1668,7 +1679,7 @@ export const LineChart = (props: propTypes) => {
   };
 
   return (
-    <View style={[styles.container, {height: containerHeight}]}>
+    <View style={[styles.container, {height: containerHeight}, yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness }]}>
       {props.hideAxesAndRules !== true && renderHorizSections()}
       {/* {sectionsOverlay()} */}
       <ScrollView
@@ -1676,16 +1687,22 @@ export const LineChart = (props: propTypes) => {
         contentContainerStyle={[
           {
             height: containerHeight + 130,
-            width: totalWidth,
+            width: totalWidth -20,
             // backgroundColor: 'yellow'
           },
-          !props.width && {width: totalWidth},
+          !props.width && {width: totalWidth -20},
         ]}
         scrollEnabled={!disableScroll}
+        ref={scrollRef}
+        onContentSizeChange={()=>{
+          if(scrollRef.current && scrollToEnd){        
+            scrollRef.current.scrollToEnd({animated: scrollAnimation});
+          }
+        }}
         showsHorizontalScrollIndicator={showScrollIndicator}
         style={[
           {
-            marginLeft: yAxisLabelWidth + yAxisThickness,
+            marginLeft: yAxisSide === 'right' ? -yAxisLabelWidth - yAxisThickness + 6 : yAxisLabelWidth + yAxisThickness,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60, //stepHeight * -0.5 + xAxisThickness,
             paddingRight: 100,

package/src/PieChart/index.tsx

@@ -420,9 +420,11 @@ export const PieChart = (props: propTypes) => {
               borderTopWidth: isThreeD
                 ? innerCircleBorderWidth * 5
                 : innerCircleBorderWidth,
-              borderLeftWidth: 0.001,
+              borderLeftWidth: 0.5,
+              borderLeftColor:innerCircleColor,
               borderBottomWidth: 0,
-              borderRightWidth: 0.001,
+              borderRightWidth: 0.5,
+              borderRightColor:innerCircleColor,
             },
           ]}>
           {props.centerLabelComponent ? props.centerLabelComponent() : null}