react-native-gifted-charts 1.3.32 → 1.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {ReactNode, useEffect, useState} from 'react';
 import {
   View,
   ColorValue,
@@ -10,7 +10,7 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import Cap from '../Components/BarSpecificComponents/cap';
-import {itemType} from './types';
+import {barDataItem} from './types';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -18,7 +18,8 @@ if (Platform.OS === 'android') {
 }
 
 type propTypes = {
-  item: itemType;
+  item: barDataItem;
+  index: number;
   height: number;
   minHeight: number;
   opacity?: number;
@@ -52,6 +53,7 @@ type propTypes = {
   patternId?: String;
   barMarginBottom?: number;
   barStyle?: object;
+  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
 };
 
 const Animated2DWithGradient = (props: propTypes) => {
@@ -61,6 +63,7 @@ const Animated2DWithGradient = (props: propTypes) => {
     barWidth,
     barStyle,
     item,
+    index,
     opacity,
     animationDuration,
     noGradient,
@@ -75,6 +78,7 @@ const Animated2DWithGradient = (props: propTypes) => {
     barBorderTopRightRadius,
     barBorderBottomLeftRadius,
     barBorderBottomRightRadius,
+    barInnerComponent,
     intactTopLabel,
     showValuesAsTopLabel,
     topLabelContainerStyle,
@@ -121,6 +125,7 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
+            overflow:'hidden',
             height:
               (noAnimation
                 ? Math.max(
@@ -314,6 +319,11 @@ const Animated2DWithGradient = (props: propTypes) => {
                 />
               </Svg>
             )}
+            {barInnerComponent ? (
+              <View style={{height: '100%', width: '100%'}}>
+                {barInnerComponent(item,index)}
+              </View>
+            ) : null}
           </View>
           {(item.topLabelComponent || showValuesAsTopLabel) && (
             <View

package/src/BarChart/RenderBars.tsx

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
+import React, {Component, ReactNode} from 'react';
 import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
 import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
 import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
-import {itemType} from './types';
+import {barDataItem} from './types';
 import {Pointer} from '../utils/types';
 
 type Props = {
@@ -26,7 +26,7 @@ type Props = {
   side?: String;
   labelTextStyle?: any;
 
-  item: itemType;
+  item: barDataItem;
   index: number;
   label: String;
   containerHeight?: number;
@@ -67,6 +67,7 @@ type Props = {
   barBorderTopRightRadius?: number;
   barBorderBottomLeftRadius?: number;
   barBorderBottomRightRadius?: number;
+  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
   autoShiftLabels?: boolean;
   barBackgroundPattern?: Function;
   patternId?: String;
@@ -133,6 +134,8 @@ const RenderBars = (props: Props) => {
     pointerConfig,
   } = props;
 
+  const localBarInnerComponent = item.barInnerComponent ?? props.barInnerComponent;
+
   const barMarginBottom =
     item.barMarginBottom === 0
       ? 0
@@ -169,15 +172,15 @@ const RenderBars = (props: Props) => {
                   ],
                 }
             : horizontal
-            ? {transform: [{rotate: '-90deg'}]}
-            : value < 0
-            ? {
-                transform: [
-                  {rotate: '180deg'},
-                  {translateY: autoShiftLabels ? 0 : 32},
-                ],
-              }
-            : {},
+              ? {transform: [{rotate: '-90deg'}]}
+              : value < 0
+                ? {
+                    transform: [
+                      {rotate: '180deg'},
+                      {translateY: autoShiftLabels ? 0 : 32},
+                    ],
+                  }
+                : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -227,8 +230,8 @@ const RenderBars = (props: Props) => {
               ? {transform: [{rotate: '330deg'}]}
               : {transform: [{rotate: '60deg'}]}
             : horizontal
-            ? {transform: [{rotate: '-90deg'}]}
-            : {},
+              ? {transform: [{rotate: '-90deg'}]}
+              : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -247,7 +250,7 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const static2DWithGradient = (item: itemType) => {
+  const static2DWithGradient = (item: barDataItem) => {
     return (
       <>
         <LinearGradient
@@ -352,6 +355,11 @@ const RenderBars = (props: Props) => {
             )}
           </View>
         )}
+        {localBarInnerComponent ? (
+          <View style={{height: '100%', width: '100%'}}>
+            {localBarInnerComponent(item, index)}
+          </View>
+        ) : null}
       </>
     );
   };
@@ -389,16 +397,16 @@ const RenderBars = (props: Props) => {
           ],
         }
       : pointerConfig
-      ? {
-          transform: [
-            {
-              translateY:
-                (containerHeight || 200) -
-                (barHeight - 10 + xAxisLabelsVerticalShift),
-            },
-          ],
-        }
-      : null,
+        ? {
+            transform: [
+              {
+                translateY:
+                  (containerHeight || 200) -
+                  (barHeight - 10 + xAxisLabelsVerticalShift),
+              },
+            ],
+          }
+        : null,
     // !isThreeD && !item.showGradient && !props.showGradient &&
     // { backgroundColor: item.frontColor || props.frontColor || 'black' },
     side !== 'right' && {zIndex: data.length - index},
@@ -417,6 +425,7 @@ const RenderBars = (props: Props) => {
         barWidth={props.barWidth || 30}
         barStyle={barStyle}
         item={item}
+        index={index}
         opacity={opacity}
         animationDuration={animationDuration || 800}
         roundedBottom={props.roundedBottom || false}
@@ -446,6 +455,7 @@ const RenderBars = (props: Props) => {
         barBorderTopRightRadius={barBorderTopRightRadius}
         barBorderBottomLeftRadius={barBorderBottomLeftRadius}
         barBorderBottomRightRadius={barBorderBottomRightRadius}
+        barInnerComponent={localBarInnerComponent}
       />
     );
     return (
@@ -471,10 +481,12 @@ const RenderBars = (props: Props) => {
             barBackgroundPattern={
               item.barBackgroundPattern || props.barBackgroundPattern
             }
+            barInnerComponent={localBarInnerComponent}
             patternId={item.patternId || props.patternId}
             width={item.barWidth || props.barWidth || 30}
             barStyle={barStyle}
             item={item}
+            index={index}
             sideWidth={
               item.sideWidth ||
               props.sideWidth ||
@@ -530,8 +542,8 @@ const RenderBars = (props: Props) => {
             item.onPress
               ? item.onPress()
               : props.onPress
-              ? props.onPress(item, index)
-              : null;
+                ? props.onPress(item, index)
+                : null;
           }}
           style={barWrapperStyle}>
           {barContent()}

package/src/BarChart/RenderStackBars.tsx

@@ -1,9 +1,8 @@
-import React, {Component, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   View,
   TouchableOpacity,
   Text,
-  ColorValue,
   LayoutAnimation,
   Platform,
   UIManager,
@@ -11,78 +10,14 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {BarDefaults} from '../utils/constants';
-import {stackItemType} from './types';
-import {Pointer} from '../utils/types';
+import {StackedBarChartPropsType, stackDataItem} from './types';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-type Props = {
-  style?: any;
-  width?: number;
-  height?: number;
-  color?: ColorValue;
-  topLabelComponent?: Component;
-  topLabelContainerStyle?: any;
-  opacity?: number;
-  label: String;
-  labelTextStyle?: any;
-  disablePress?: boolean;
-
-  item: stackItemType;
-  index: number;
-  containerHeight?: number;
-  maxValue: number;
-  spacing: number;
-  propSpacing?: number;
-  data?: any;
-  barWidth?: number;
-  onPress?: Function;
-
-  rotateLabel?: boolean;
-  showXAxisIndices: boolean;
-  xAxisIndicesHeight: number;
-  xAxisIndicesWidth: number;
-  xAxisIndicesColor: ColorValue;
-  horizontal: boolean;
-  intactTopLabel: boolean;
-  barBorderWidth?: number;
-  barBorderColor: ColorValue;
-  barBorderRadius?: number;
-  barBorderTopLeftRadius?: number;
-  barBorderTopRightRadius?: number;
-  barBorderBottomLeftRadius?: number;
-  barBorderBottomRightRadius?: number;
-  stackBorderRadius?: number;
-  stackBorderTopLeftRadius?: number;
-  stackBorderTopRightRadius?: number;
-  stackBorderBottomLeftRadius?: number;
-  stackBorderBottomRightRadius?: number;
-  xAxisThickness: number;
-  barBackgroundPattern?: Function;
-  patternId?: String;
-  xAxisTextNumberOfLines: number;
-  xAxisLabelsHeight?: number;
-  xAxisLabelsVerticalShift: number;
-  renderTooltip: Function | undefined;
-  leftShiftForTooltip?: number;
-  leftShiftForLastIndexTooltip: number;
-  initialSpacing: number;
-  selectedIndex: number;
-  setSelectedIndex: Function;
-  activeOpacity: number;
-  showGradient?: boolean;
-  gradientColor?: any;
-  stackData: Array<stackItemType>;
-  isAnimated?: boolean;
-  animationDuration?: number;
-  pointerConfig?: Pointer;
-  showValuesAsTopLabel?: boolean;
-};
-
-const RenderStackBars = (props: Props) => {
+const RenderStackBars = (props: StackedBarChartPropsType) => {
   const {
     barBackgroundPattern,
     patternId,
@@ -120,6 +55,9 @@ const RenderStackBars = (props: Props) => {
   const cotainsNegative = item.stacks.some(item => item.value < 0);
   const noAnimation = cotainsNegative || !isAnimated;
 
+  const localBarInnerComponent =
+    item.barInnerComponent ?? props.barInnerComponent;
+
   const {
     borderRadius,
     borderTopLeftRadius,
@@ -195,8 +133,8 @@ const RenderStackBars = (props: Props) => {
               ? {transform: [{rotate: '330deg'}]}
               : {transform: [{rotate: '60deg'}]}
             : props.horizontal
-            ? {transform: [{rotate: '-90deg'}]}
-            : {},
+              ? {transform: [{rotate: '-90deg'}]}
+              : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -241,25 +179,8 @@ const RenderStackBars = (props: Props) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const barWrapper = () => {
-    return noAnimation ? (
-      static2DSimple()
-    ) : (
-      <View
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          height: height,
-          width: '100%',
-          overflow: 'hidden',
-        }}>
-        {static2DSimple()}
-      </View>
-    );
-  };
-
   const static2DSimple = () => {
-    const getStackBorderRadii = (item: stackItemType, index: number) => {
+    const getStackBorderRadii = (item: stackDataItem, index: number) => {
       const stackItem = item.stacks[index];
       const borderRadii = {
         borderTopLeftRadius:
@@ -398,6 +319,11 @@ const RenderStackBars = (props: Props) => {
             </Svg>
           )}
         </TouchableOpacity>
+        {localBarInnerComponent ? (
+          <View style={{height: '100%', width: '100%'}}>
+            {localBarInnerComponent(item, index)}
+          </View>
+        ) : null}
         {(item.topLabelComponent || showValuesAsTopLabel) && (
           <View
             style={[
@@ -429,6 +355,23 @@ const RenderStackBars = (props: Props) => {
     );
   };
 
+  const barWrapper = () => {
+    return noAnimation ? (
+      static2DSimple()
+    ) : (
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          height: height,
+          width: '100%',
+          overflow: 'hidden',
+        }}>
+        {static2DSimple()}
+      </View>
+    );
+  };
+
   return (
     <>
       <View

package/src/BarChart/index.tsx

@@ -22,7 +22,7 @@ import {
   screenWidth,
 } from '../utils/constants';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import {BarChartPropsType, itemType} from './types';
+import {BarChartPropsType, barDataItem} from './types';
 import {BarAndLineChartsWrapperTypes} from '../utils/types';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
@@ -139,7 +139,7 @@ export const BarChart = (props: BarChartPropsType) => {
           BarDefaults.barWidth) + spacing;
     });
   } else {
-    data.forEach((item: itemType) => {
+    data.forEach((item: barDataItem) => {
       if (item.value > maxItem) {
         maxItem = item.value;
       }
@@ -156,7 +156,7 @@ export const BarChart = (props: BarChartPropsType) => {
     secondaryMinItem = 0;
 
   if (lineConfig.isSecondary) {
-    lineData.forEach((item: itemType) => {
+    lineData.forEach((item: barDataItem) => {
       if (item.value > secondaryMaxItem) {
         secondaryMaxItem = item.value;
       }
@@ -324,6 +324,8 @@ export const BarChart = (props: BarChartPropsType) => {
         : true
       : false);
 
+  const barInnerComponent = props.barInnerComponent;
+
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);
     Animated.timing(opacValue, {
@@ -811,6 +813,7 @@ export const BarChart = (props: BarChartPropsType) => {
         barBorderTopRightRadius: props.barBorderTopRightRadius,
         barBorderBottomLeftRadius: props.barBorderBottomLeftRadius,
         barBorderBottomRightRadius: props.barBorderBottomRightRadius,
+        barInnerComponent,
         color: props.color,
         showGradient: props.showGradient,
         gradientColor: props.gradientColor,

package/src/BarChart/types.ts

@@ -1,4 +1,4 @@
-import {ColorValue, GestureResponderEvent, View} from 'react-native';
+import {ColorValue, GestureResponderEvent} from 'react-native';
 import {yAxisSides} from '../utils/constants';
 import {
   CurveType,
@@ -8,8 +8,9 @@ import {
   referenceConfigType,
   secondaryYAxisType,
 } from '../utils/types';
+import {Component, ReactNode} from 'react';
 
-export type stackItemType = {
+export type stackDataItem = {
   onPress?: any;
   label?: String;
   barWidth?: number;
@@ -47,11 +48,76 @@ export type stackItemType = {
   borderTopRightRadius?: number;
   borderBottomLeftRadius?: number;
   borderBottomRightRadius?: number;
+  barInnerComponent?: (item?: stackDataItem, index?: number) => ReactNode;
   patternId?: String;
   leftShiftForTooltip?: number;
   showXAxisIndex?: boolean;
 };
 
+export type StackedBarChartPropsType = {
+  style?: any;
+  width?: number;
+  height?: number;
+  color?: ColorValue;
+  topLabelComponent?: Component;
+  topLabelContainerStyle?: any;
+  opacity?: number;
+  label: String;
+  labelTextStyle?: any;
+  disablePress?: boolean;
+
+  item: stackDataItem;
+  index: number;
+  containerHeight?: number;
+  maxValue: number;
+  spacing: number;
+  propSpacing?: number;
+  data?: any;
+  barWidth?: number;
+  onPress?: Function;
+
+  rotateLabel?: boolean;
+  showXAxisIndices: boolean;
+  xAxisIndicesHeight: number;
+  xAxisIndicesWidth: number;
+  xAxisIndicesColor: ColorValue;
+  horizontal: boolean;
+  intactTopLabel: boolean;
+  barBorderWidth?: number;
+  barBorderColor: ColorValue;
+  barBorderRadius?: number;
+  barBorderTopLeftRadius?: number;
+  barBorderTopRightRadius?: number;
+  barBorderBottomLeftRadius?: number;
+  barBorderBottomRightRadius?: number;
+  barInnerComponent?: (item?: barDataItem | stackDataItem, index?: number) => ReactNode;
+  stackBorderRadius?: number;
+  stackBorderTopLeftRadius?: number;
+  stackBorderTopRightRadius?: number;
+  stackBorderBottomLeftRadius?: number;
+  stackBorderBottomRightRadius?: number;
+  xAxisThickness: number;
+  barBackgroundPattern?: Function;
+  patternId?: String;
+  xAxisTextNumberOfLines: number;
+  xAxisLabelsHeight?: number;
+  xAxisLabelsVerticalShift: number;
+  renderTooltip: Function | undefined;
+  leftShiftForTooltip?: number;
+  leftShiftForLastIndexTooltip: number;
+  initialSpacing: number;
+  selectedIndex: number;
+  setSelectedIndex: Function;
+  activeOpacity: number;
+  showGradient?: boolean;
+  gradientColor?: any;
+  stackData: Array<stackDataItem>;
+  isAnimated?: boolean;
+  animationDuration?: number;
+  pointerConfig?: Pointer;
+  showValuesAsTopLabel?: boolean;
+};
+
 export type BarChartPropsType = {
   width?: number;
   height?: number;
@@ -64,8 +130,8 @@ export type BarChartPropsType = {
   stepHeight?: number;
   stepValue?: number;
   spacing?: number;
-  data?: Array<itemType>;
-  stackData?: Array<stackItemType>;
+  data?: Array<barDataItem>;
+  stackData?: Array<stackDataItem>;
   side?: String;
   rotateLabel?: boolean;
   isAnimated?: boolean;
@@ -212,8 +278,9 @@ export type BarChartPropsType = {
   leftShiftForTooltip?: number;
   leftShiftForLastIndexTooltip?: number;
   barStyle?: object;
+  barInnerComponent?: (item?: stackDataItem | barDataItem, index?: number) => ReactNode;
 
-  secondaryData?: Array<itemType>;
+  secondaryData?: Array<barDataItem>;
   secondaryYAxis?: secondaryYAxisType | boolean;
   pointerConfig?: Pointer;
   getPointerProps?: Function;
@@ -290,7 +357,7 @@ type arrowType = {
 type sectionType = {
   value: string;
 };
-export type itemType = {
+export type barDataItem = {
   value: number;
   onPress?: any;
   frontColor?: ColorValue;
@@ -322,5 +389,6 @@ export type itemType = {
   barMarginBottom?: number;
   leftShiftForTooltip?: number;
   barStyle?: object;
+  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
   showXAxisIndex?: boolean;
 };

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {ReactNode, useEffect, useState} from 'react';
 import {
   View,
   StyleSheet,
@@ -11,6 +11,7 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
+import {barDataItem} from '../../BarChart/types';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -42,9 +43,11 @@ type animatedBarPropTypes = {
   topLabelContainerStyle?: any;
   topLabelTextStyle?: any;
   barBackgroundPattern?: Function;
+  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
   patternId?: String;
   barStyle?: object;
   item: any;
+  index: number;
 };
 
 const TriangleCorner = (props: trianglePropTypes) => {
@@ -79,10 +82,12 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
     isAnimated,
     animationDuration,
     item,
+    index,
     width,
     sideWidth,
     barStyle,
     barBackgroundPattern,
+    barInnerComponent,
     patternId,
     intactTopLabel,
     showValuesAsTopLabel,
@@ -238,6 +243,11 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                 />
               </Svg>
             )}
+            {barInnerComponent ? (
+              <View style={{height: '100%', width: '100%'}}>
+                {barInnerComponent(item, index)}
+              </View>
+            ) : null}
           </View>
 
           {/*******************          Top Label            *****************/}

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart.tsx

@@ -322,7 +322,7 @@ const RenderLineInBarChart = props => {
         style={{
           position: 'absolute',
           height: containerHeight + 10,
-          left: 34 - yAxisLabelWidth,
+          left: 6 - yAxisLabelWidth,
           bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
           width: animatedWidth,
           zIndex: lineBehindBars ? -1 : 100000,