react-native-gifted-charts 1.0.2 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "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",
@@ -58,8 +59,7 @@
     "pie",
     "donut",
     "area",
-    "line",
-    "react native"
+    "line"
   ],
   "jest": {
     "preset": "react-native"

package/src/BarChart/Animated2DWithGradient.tsx

@@ -32,6 +32,8 @@ type propTypes = {
   horizontal: Boolean;
   intactTopLabel: Boolean;
   barBorderRadius?: number;
+  containerHeight?: number;
+  maxValue?: number;
 };
 type itemType = {
   value?: number;
@@ -54,12 +56,19 @@ type itemType = {
 };
 
 const Animated2DWithGradient = (props: propTypes) => {
-  const {item, opacity, animationDuration, noGradient, noAnimation} = props;
+  const {
+    item,
+    opacity,
+    animationDuration,
+    noGradient,
+    noAnimation,
+    containerHeight,
+    maxValue,
+  } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );
-  // console.log('comes to animated2DWithGradient', item);
 
   useEffect(() => {
     if (!noAnimation) {
@@ -97,9 +106,19 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
-            height: height,
+            height: noAnimation
+              ? (Math.abs(item.value) * (containerHeight || 200)) /
+                (maxValue || 200)
+              : height,
           }}>
-          <View style={{width: '100%', height: height}}>
+          <View
+            style={{
+              width: '100%',
+              height: noAnimation
+                ? (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200)
+                : height,
+            }}>
             {noGradient ? (
               <View
                 style={[
@@ -223,13 +242,14 @@ const Animated2DWithGradient = (props: propTypes) => {
                   height: item.barWidth || 30,
                   width: item.barWidth || 30,
                   justifyContent:
-                    (props.horizontal && !props.intactTopLabel) || item.value < 0
+                    (props.horizontal && !props.intactTopLabel) ||
+                    item.value < 0
                       ? 'center'
                       : 'flex-end',
                   alignItems: 'center',
                   opacity: opacity,
                 },
-                item.value < 0 && {transform:[{rotate:'180deg'}]},
+                item.value < 0 && {transform: [{rotate: '180deg'}]},
                 props.horizontal &&
                   !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
                 item.topLabelContainerStyle,
@@ -243,4 +263,4 @@ const Animated2DWithGradient = (props: propTypes) => {
   );
 };
 
-export default Animated2DWithGradient;
+export default Animated2DWithGradient;

package/src/BarChart/RenderBars.tsx

@@ -121,18 +121,29 @@ const RenderBars = (props: Props) => {
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
-              : {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
+              : {
+                  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}]}
-            :{},
+            ? {
+                transform: [
+                  {rotate: '180deg'},
+                  {translateY: autoShiftLabels ? 0 : 32},
+                ],
+              }
+            : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -141,7 +152,11 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
+  const renderAnimatedLabel = (
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
     return (
       <Animated.View
         style={[
@@ -158,7 +173,7 @@ const RenderBars = (props: Props) => {
             bottom: rotateLabel ? -40 : -25,
             opacity: appearingOpacity,
           },
-          value < 0 && {transform:[{rotate:'180deg'}]},
+          value < 0 && {transform: [{rotate: '180deg'}]},
           rotateLabel
             ? props.horizontal
               ? {transform: [{rotate: '330deg'}]}
@@ -171,7 +186,7 @@ const RenderBars = (props: Props) => {
           item.labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -255,7 +270,7 @@ const RenderBars = (props: Props) => {
                     : 'flex-end',
                 alignItems: 'center',
               },
-              item.value < 0 && {transform:[{rotate:'180deg'}]},
+              item.value < 0 && {transform: [{rotate: '180deg'}]},
               props.horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
@@ -277,13 +292,27 @@ const RenderBars = (props: Props) => {
           // overflow: 'visible',
           marginBottom: 60,
           width: item.barWidth || props.barWidth || 30,
-          height: item.value>=0 &&(!isThreeD || isAnimated) && item.topLabelComponent
-            ? (item.topLabelComponentHeight || 30) +
-              (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
-            : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200),
+          height:
+            item.value >= 0 &&
+            (!isThreeD || isAnimated) &&
+            item.topLabelComponent
+              ? (item.topLabelComponentHeight || 30) +
+                (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'}]},
+        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},
@@ -333,7 +362,10 @@ const RenderBars = (props: Props) => {
             topLabelComponent={item.topLabelComponent}
             opacity={opacity || 1}
             animationDuration={animationDuration || 800}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             intactTopLabel={props.intactTopLabel}
             horizontal={props.horizontal}
           />
@@ -358,7 +390,10 @@ const RenderBars = (props: Props) => {
             opacity={opacity || 1}
             horizontal={props.horizontal}
             intactTopLabel={props.intactTopLabel}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             value={item.value}
           />
         )
@@ -373,7 +408,12 @@ const RenderBars = (props: Props) => {
             roundedTop={props.roundedTop || false}
             gradientColor={props.gradientColor}
             frontColor={props.frontColor || 'black'}
-            height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+            containerHeight={containerHeight}
+            maxValue={maxValue}
+            height={
+              (Math.abs(item.value) * (containerHeight || 200)) /
+              (maxValue || 200)
+            }
             cappedBars={props.cappedBars}
             capThickness={props.capThickness}
             capColor={props.capColor}
@@ -396,7 +436,12 @@ const RenderBars = (props: Props) => {
           gradientColor={props.gradientColor}
           noGradient
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -417,7 +462,12 @@ const RenderBars = (props: Props) => {
           noGradient
           noAnimation
           frontColor={props.frontColor || 'black'}
-          height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
+          containerHeight={containerHeight}
+          maxValue={maxValue}
+          height={
+            (Math.abs(item.value) * (containerHeight || 200)) /
+            (maxValue || 200)
+          }
           cappedBars={props.cappedBars}
           capThickness={props.capThickness}
           capColor={props.capColor}
@@ -428,10 +478,10 @@ const RenderBars = (props: Props) => {
         />
       )}
       {isAnimated
-        ? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
-        : renderLabel(item.label || '', item.labelTextStyle,item.value)}
+        ? 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

@@ -141,7 +141,9 @@ const RenderStackBars = (props: Props) => {
                         stackItem.borderBottomRightRadius || 0,
                     },
                 ]}
-              />
+              >
+                {stackItem.innerBarComponent && stackItem.innerBarComponent()}
+              </TouchableOpacity>
             );
           })}
         </View>

package/src/BarChart/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useMemo,
   useState,
+  useRef,
 } from 'react';
 import {
   View,
@@ -19,7 +20,6 @@ import RenderStackBars from './RenderStackBars';
 import Rule from '../Components/lineSvg';
 import {bezierCommand, svgPath} from '../utils';
 import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
-import { useRef } from 'react';
 
 type PropTypes = {
   width?: number;
@@ -47,6 +47,7 @@ type PropTypes = {
   yAxisTextStyle?: any;
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
+  yAxisSide?: string;
   initialSpacing?: number;
   barWidth?: number;
   sideWidth?: number;
@@ -119,7 +120,8 @@ type PropTypes = {
   yAxisLabelSuffix?: String;
   autoShiftLabels?: Boolean;
   scrollToEnd?: Boolean;
-  scrollAnimation?: Boolean
+  scrollAnimation?: Boolean;
+  labelsExtraHeight?: number;
 };
 type lineConfigType = {
   curved?: Boolean;
@@ -230,6 +232,7 @@ export const BarChart = (props: PropTypes) => {
   const labelWidth = props.labelWidth || 0;
   const scrollToEnd = props.scrollToEnd || false;
   const scrollAnimation = props.scrollAnimation === false ? false : true;
+  const labelsExtraHeight = props.labelsExtraHeight || 0;
 
   let totalWidth = spacing;
   let maxItem = 0, minItem = 0;
@@ -321,6 +324,7 @@ export const BarChart = (props: PropTypes) => {
 
   const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
   const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
+  const yAxisSide = props.yAxisSide || 'left';
 
   const xAxisThickness =
     props.xAxisThickness === 0
@@ -598,6 +602,7 @@ export const BarChart = (props: PropTypes) => {
                     ? props.width || totalWidth
                     : props.width || totalWidth + 11,
                 },
+                yAxisSide === 'right' && {transform:[{rotateY:'180deg'}]}
               ]}>
               <View
                 style={[
@@ -623,12 +628,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>
@@ -1091,8 +1097,12 @@ export const BarChart = (props: PropTypes) => {
       style={[
         styles.container,
         {
-          height: containerHeight + horizSectionsBelow.length * stepHeight,
+          height:
+            containerHeight +
+            horizSectionsBelow.length * stepHeight +
+            labelsExtraHeight,
         },
+        yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
         props.width && {width: props.width},
         horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
       ]}>
@@ -1106,7 +1116,7 @@ export const BarChart = (props: PropTypes) => {
         }}
         style={[
           {
-            marginLeft: yAxisLabelWidth,
+            marginLeft: yAxisSide === 'right' ? -yAxisLabelWidth+10 : yAxisLabelWidth,
             position: 'absolute',
             bottom: stepHeight * -0.5 - 60 + xAxisThickness,
           },
@@ -1119,7 +1129,7 @@ export const BarChart = (props: PropTypes) => {
             // backgroundColor: 'yellow',
             height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
             paddingLeft: initialSpacing,
-            paddingBottom:horizSectionsBelow.length * stepHeight,
+            paddingBottom:horizSectionsBelow.length * stepHeight + labelsExtraHeight,
             alignItems: 'flex-end',
           },
           !props.width && {width: totalWidth},

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) {
@@ -957,7 +966,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -995,7 +1004,7 @@ export const LineChart = (props: propTypes) => {
           labelComponent()
         ) : (
           <Text
-            style={[labelTextStyle, {textAlign: 'center'}]}
+            style={labelTextStyle || {textAlign: 'center'}}
             numberOfLines={1}>
             {label || ''}
           </Text>
@@ -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,