react-native-gifted-charts 1.4.15 → 1.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "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": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.11"
+    "gifted-charts-core": "^0.1.15"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/RenderBars.tsx

@@ -11,6 +11,7 @@ import {
   barDataItem,
   AxesAndRulesDefaults,
 } from 'gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
 
 const RenderBars = (props: RenderBarsPropsType) => {
   const {
@@ -57,6 +58,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     stepValue,
     negativeStepHeight,
     negativeStepValue,
+    autoCenterTooltip,
   } = props;
 
   const heightFactor =
@@ -328,7 +330,10 @@ const RenderBars = (props: RenderBarsPropsType) => {
   const barContent = () => {
     const isBarBelowXaxisAndInvisible =
       item.value < 0 && !noOfSectionsBelowXAxis;
-    const animated2DWithGradient = (noGradient, noAnimation) => (
+    const animated2DWithGradient = (
+      noGradient: boolean,
+      noAnimation: boolean,
+    ) => (
       <Animated2DWithGradient
         {...commonPropsFor2Dand3Dbars}
         animationDuration={animationDuration || 800}
@@ -400,6 +405,20 @@ const RenderBars = (props: RenderBarsPropsType) => {
     );
   };
 
+  const tooltipProps = {
+    barHeight,
+    barWidth: item.barWidth || barWidth,
+    item,
+    index,
+    isLast: index === data.length - 1,
+    leftSpacing,
+    leftShiftForLastIndexTooltip,
+    leftShiftForTooltip: item.leftShiftForTooltip ?? leftShiftForTooltip ?? 0,
+    renderTooltip,
+    autoCenterTooltip,
+    horizontal,
+  };
+
   return (
     <>
       {pressDisabled ? (
@@ -440,19 +459,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
         </TouchableOpacity>
       )}
       {renderTooltip && selectedIndex === index && (
-        <View
-          style={{
-            position: 'absolute',
-            bottom: barHeight + 60,
-            left:
-              index === data.length - 1
-                ? leftSpacing - leftShiftForLastIndexTooltip
-                : leftSpacing -
-                  (item?.leftShiftForTooltip ?? leftShiftForTooltip ?? 0),
-            zIndex: 1000,
-          }}>
-          {renderTooltip(item, index)}
-        </View>
+        <Tooltip {...tooltipProps} />
       )}
     </>
   );

package/src/BarChart/RenderStackBars.tsx

@@ -14,6 +14,7 @@ import {
   BarDefaults,
   StackedBarChartPropsType,
 } from 'gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -34,12 +35,9 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
     xAxisTextNumberOfLines,
     xAxisLabelsVerticalShift,
     renderTooltip,
-    leftShiftForTooltip,
-    leftShiftForLastIndexTooltip,
     selectedIndex,
     setSelectedIndex,
     activeOpacity,
-    stackData,
     animationDuration = BarDefaults.animationDuration,
     barBorderWidth,
     barBorderColor,
@@ -51,6 +49,7 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
     showValuesAsTopLabel,
     autoShiftLabelsForNegativeStacks = true,
     labelsDistanceFromXaxis = 0,
+    horizontal,
   } = props;
   const {
     cotainsNegative,
@@ -61,7 +60,6 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
     borderTopRightRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
-    leftSpacing,
     disablePress,
     totalHeight,
     height,
@@ -70,6 +68,7 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
     getPosition,
     lowestBarPosition,
     getStackBorderRadii,
+    tooltipProps,
   } = useRenderStackBars(props);
 
   const renderLabel = (label: String, labelTextStyle: any) => {
@@ -85,10 +84,10 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
               : -labelsDistanceFromXaxis,
           },
           rotateLabel
-            ? props.horizontal
+            ? horizontal
               ? {transform: [{rotate: '330deg'}]}
               : {transform: [{rotate: '60deg'}]}
-            : props.horizontal
+            : horizontal
               ? {transform: [{rotate: '-90deg'}]}
               : {},
         ]}>
@@ -268,7 +267,7 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
                 alignItems: 'center',
               },
               cotainsNegative && {transform: [{translateY: totalHeight * 2}]},
-              props.horizontal &&
+              horizontal &&
                 !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
               item.topLabelContainerStyle,
             ]}>
@@ -331,19 +330,6 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
               }
             : null,
         ]}>
-        {/* {props.showVerticalLines && (
-          <View
-            style={{
-              zIndex: props.verticalLinesZIndex,
-              position: 'absolute',
-              height: (containerHeight || 200) + 15,
-              width: props.verticalLinesThickness,
-              bottom: 0,
-              left: (item.barWidth || props.barWidth || 30) / 2,
-              backgroundColor: props.verticalLinesColor,
-            }}
-          />
-        )} */}
         {(props.showXAxisIndices || item.showXAxisIndex) && (
           <View
             style={{
@@ -364,19 +350,7 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
         {renderLabel(label || '', labelTextStyle)}
       </View>
       {renderTooltip && selectedIndex === index && (
-        <View
-          style={{
-            position: 'absolute',
-            bottom: totalHeight + 60,
-            left:
-              index === stackData.length - 1
-                ? leftSpacing - leftShiftForLastIndexTooltip
-                : leftSpacing -
-                  (item.leftShiftForTooltip ?? leftShiftForTooltip ?? 0),
-            zIndex: 1000,
-          }}>
-          {renderTooltip(item, index)}
-        </View>
+        <Tooltip {...tooltipProps} />
       )}
     </>
   );

package/src/BarChart/index.tsx

@@ -16,7 +16,7 @@ export const BarChart = (props: BarChartPropsType) => {
   const scrollRef = props.scrollRef ?? useRef(null);
   const remainingScrollViewProps = {
     onScroll: (ev: any) => props.onScroll?.(ev),
-    onTouchStart: evt => {
+    onTouchStart: (evt: any) => {
       if (props.renderTooltip) {
         setSelectedIndex(-1);
       }
@@ -141,7 +141,7 @@ export const BarChart = (props: BarChartPropsType) => {
     });
   };
 
-  const renderStripAndLabel = pointerLabelComponent => {
+  const renderStripAndLabel = (pointerLabelComponent: any) => {
     let pointerItemLocal,
       pointerYLocal = pointerY;
 
@@ -204,12 +204,16 @@ export const BarChart = (props: BarChartPropsType) => {
               barWidth / 2;
             setPointerX(z);
             setPointerIndex(factor);
+
             let item, y;
             item = (props.stackData ?? data)[factor];
-            const stackSum = item.stacks?.reduce(
-              (acc, stack) => acc + (stack.value ?? 0),
-              0,
-            );
+            let stackSum = 0;
+            if ('stacks' in item) {
+              stackSum = item.stacks.reduce(
+                (acc: number, stack: any) => acc + (stack.value ?? 0),
+                0,
+              );
+            }
             y =
               containerHeight -
               ((stackSum ?? item.value) * containerHeight) / maxValue -
@@ -248,10 +252,13 @@ export const BarChart = (props: BarChartPropsType) => {
             setPointerX(z);
             setPointerIndex(factor);
             item = (props.stackData ?? data)[factor];
-            const stackSum = item.stacks?.reduce(
-              (acc, stack) => acc + (stack.value ?? 0),
-              0,
-            );
+            let stackSum = 0;
+            if ('stacks' in item) {
+              item.stacks?.reduce(
+                (acc: number, stack: any) => acc + (stack.value ?? 0),
+                0,
+              );
+            }
             y =
               containerHeight -
               ((stackSum ?? item.value) * containerHeight) / maxValue -
@@ -326,6 +333,7 @@ export const BarChart = (props: BarChartPropsType) => {
       return props.stackData.map((item, index) => {
         return (
           <RenderStackBars
+            key={index}
             stackData={props.stackData || []}
             isAnimated={isAnimated}
             animationDuration={animationDuration}
@@ -342,6 +350,7 @@ export const BarChart = (props: BarChartPropsType) => {
     } else {
       return data.map((item, index) => (
         <RenderBars
+          key={index}
           data={data}
           side={side}
           minHeight={props.minHeight ?? (isAnimated && !isThreeD ? 0.1 : 0)}
@@ -376,6 +385,7 @@ export const BarChart = (props: BarChartPropsType) => {
       scrollRef={scrollRef}
       renderChartContent={renderChartContent}
       remainingScrollViewProps={remainingScrollViewProps}
+      nestedScrollEnabled={props.nestedScrollEnabled}
     />
   );
 };

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -53,6 +53,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     onEndReached,
     onStartReached,
     onMomentumScrollEnd,
+    nestedScrollEnabled,
     extraWidthDueToDataPoint = 0, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
   } = props;
 
@@ -125,6 +126,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         onScrollBeginDrag={() => {
           setCanMomentum(true);
         }}
+        nestedScrollEnabled={nestedScrollEnabled}
         onMomentumScrollEnd={({nativeEvent}) => {
           if (onMomentumScrollEnd) {
             onMomentumScrollEnd();

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -7,10 +7,12 @@ import {
   yAxisSides,
   HorizSectionsType,
   horizSectionPropTypes,
+  chartTypes,
 } from 'gifted-charts-core';
 
 export const renderHorizSections = (props: horizSectionPropTypes) => {
   const {
+    chartType,
     width,
     noOfSectionsBelowXAxis,
     totalWidth,
@@ -199,10 +201,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
   ) =>
     horizSections.map((sectionItems, index) => {
       let label = getLabelTextsForSecondaryYAxis(sectionItems.value, index);
-      if (
-        secondaryYAxisConfig.hideOrigin &&
-        index === secondaryHorizSections.length - 1
-      ) {
+      if (secondaryYAxisConfig.hideOrigin && index === 0) {
         label = '';
       }
       return (
@@ -330,6 +329,12 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     );
   };
 
+  const leftShiftForRIghtYaxis =
+    (width ? width + 20 : totalWidth) +
+    yAxisLabelWidth / 2 +
+    endSpacing -
+    (chartType === chartTypes.BAR ? 40 : 60);
+
   return (
     <>
       {onlyReferenceLines ? (
@@ -411,7 +416,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                               : stepHeight,
                         },
                         yAxisSide === yAxisSides.RIGHT && {
-                          left: (width ?? totalWidth) + yAxisLabelWidth / 2,
+                          left: leftShiftForRIghtYaxis,
                         },
                         horizontal &&
                           !yAxisAtTop && {

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx

@@ -5,7 +5,7 @@ import {renderSpecificVerticalLines} from './renderSpecificVerticalLines';
 import {renderDataPoints} from './renderDataPoints';
 import {renderSpecificDataPoints} from './renderSpecificDataPoints';
 
-const RenderLineInBarChart = props => {
+const RenderLineInBarChart = (props: any) => {
   const {
     yAxisLabelWidth,
     initialSpacing,

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx

@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
 import {Rect, Text as CanvasText, Circle} from 'react-native-svg';
 
-export const renderDataPoints = props => {
+export const renderDataPoints = (props: any) => {
   const {
     data,
     lineConfig,
@@ -22,7 +22,8 @@ export const renderDataPoints = props => {
     const currentBarWidth = item.barWidth || barWidth || 30;
     const customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
     const value =
-      item.value ?? item.stacks.reduce((total, item) => total + item.value, 0);
+      item.value ??
+      item.stacks.reduce((total: number, item: any) => total + item.value, 0);
     if (customDataPoint) {
       return (
         <View

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.tsx

@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 import {getXForLineInBar, getYForLineInBar} from 'gifted-charts-core';
 import {Circle, Rect, Text as CanvasText} from 'react-native-svg';
 
-export const renderSpecificDataPoints = props => {
+export const renderSpecificDataPoints = (props: any) => {
   const {
     data,
     barWidth,

package/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Rect} from 'react-native-svg';
 
-export const renderSpecificVerticalLines = props => {
+export const renderSpecificVerticalLines = (props: any) => {
   const {
     data,
     barWidth,

package/src/Components/BarAndLineChartsWrapper/renderVerticalLines.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {chartTypes} from 'gifted-charts-core';
 import {Line, Svg} from 'react-native-svg';
 
-const RenderVerticalLines = props => {
+const RenderVerticalLines = (props: any) => {
   const {
     verticalLinesAr,
     verticalLinesSpacing,
@@ -29,7 +29,7 @@ const RenderVerticalLines = props => {
     xAxisLabelsVerticalShift,
   } = props;
 
-  const getHeightOfVerticalLine = index => {
+  const getHeightOfVerticalLine = (index: number) => {
     if (verticalLinesUptoDataPoint) {
       if (index < data.length) {
         return (
@@ -107,8 +107,8 @@ const RenderVerticalLines = props => {
             (chartType === chartTypes.BAR
               ? totalSpacing - 1
               : verticalLinesSpacing
-              ? verticalLinesSpacing * (index + 1)
-              : index * spacing + (initialSpacing - 2));
+                ? verticalLinesSpacing * (index + 1)
+                : index * spacing + (initialSpacing - 2));
 
           return (
             <Line

package/src/Components/BarSpecificComponents/barBackgroundPattern.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Svg, {Defs, Rect} from 'react-native-svg';
 
-const BarBackgroundPattern = props => {
+const BarBackgroundPattern = (props: any) => {
   const {
     barBackgroundPatternFromItem,
     barBackgroundPatternFromProps,
@@ -10,20 +10,20 @@ const BarBackgroundPattern = props => {
   } = props;
   return (
     <Svg>
-        <Defs>
-            {barBackgroundPatternFromItem
-            ? barBackgroundPatternFromItem()
-            : barBackgroundPatternFromProps()}
-        </Defs>
-        <Rect
-            stroke="transparent"
-            x="1"
-            y="1"
-            width="100%"
-            height="100%"
-            fill={`url(#${patternIdFromItem ?? patternIdFromProps})`}
-        />
-        </Svg>
+      <Defs>
+        {barBackgroundPatternFromItem
+          ? barBackgroundPatternFromItem()
+          : barBackgroundPatternFromProps()}
+      </Defs>
+      <Rect
+        stroke="transparent"
+        x="1"
+        y="1"
+        width="100%"
+        height="100%"
+        fill={`url(#${patternIdFromItem ?? patternIdFromProps})`}
+      />
+    </Svg>
   );
 };
 

package/src/Components/BarSpecificComponents/cap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {BarDefaults} from 'gifted-charts-core';
 
-const Cap = props => {
+const Cap = (props: any) => {
   const {
     capThicknessFromItem,
     capThicknessFromProps,

package/src/Components/BarSpecificComponents/tooltip.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+
+interface TooltipProps {
+  barHeight: number;
+  barWidth: number;
+  item: any;
+  index: number;
+  isLast: boolean;
+  leftSpacing: number;
+  leftShiftForLastIndexTooltip: number;
+  leftShiftForTooltip: number;
+  renderTooltip?: Function;
+  autoCenterTooltip?: boolean;
+  horizontal?: boolean;
+}
+
+const Tooltip = (props: TooltipProps) => {
+  const {
+    barHeight,
+    barWidth,
+    item,
+    index,
+    isLast,
+    leftSpacing,
+    leftShiftForLastIndexTooltip,
+    leftShiftForTooltip,
+    renderTooltip,
+    autoCenterTooltip,
+    horizontal,
+  } = props;
+
+  const [leftShiftTooltipForCentering, setLeftShiftTooltipForCentering] =
+    useState(0);
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: barHeight + 60,
+        left:
+          leftSpacing -
+          (isLast ? leftShiftForLastIndexTooltip : leftShiftForTooltip) -
+          leftShiftTooltipForCentering,
+        zIndex: 1000,
+        transform: [{rotate: horizontal ? '-90deg' : '0deg'}],
+      }}
+      onLayout={event => {
+        if (!autoCenterTooltip) return;
+        const {width} = event.nativeEvent.layout;
+        const shift = (width - barWidth) / 2;
+        if (shift > 0) setLeftShiftTooltipForCentering(shift);
+      }}>
+      {renderTooltip?.(item, index)}
+    </View>
+  );
+};
+
+export default Tooltip;

package/src/Components/common/LinearGradient.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import {ViewStyle} from "react-native";
 
 type LinearGradientProps = {
-  style?: ViewStyle;
-  start?: { x: number, y: number };
-  end?: { x: number, y: number };
+  style?: any;
+  start?: {x: number; y: number};
+  end?: {x: number; y: number};
   colors: string[];
-}
+  children?: any;
+};
 
 let LinearGradient: React.FC<LinearGradientProps>;
 
@@ -19,7 +19,7 @@ try {
     LinearGradient = require('expo-linear-gradient').LinearGradient;
   } catch (e) {
     throw new Error(
-      'Gradient package was not found. Make sure "react-native-linear-gradient" or "expo-linear-gradient" is installed'
+      'Gradient package was not found. Make sure "react-native-linear-gradient" or "expo-linear-gradient" is installed',
     );
   }
 }

package/src/Components/common/Pointer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 
-export const Pointer = props => {
+export const Pointer = (props: any) => {
   const {
     pointerX,
     pointerYLocal,

package/src/Components/common/StripAndLabel.tsx

@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import Svg, {Line} from 'react-native-svg';
 import {getTopAndLeftForStripAndLabel} from 'gifted-charts-core';
 
-export const StripAndLabel = props => {
+export const StripAndLabel = (props: any) => {
   const {
     pointerX,
     pointerLabelWidth,

package/src/LineChart/LineChartBicolor.tsx

@@ -191,7 +191,7 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
     outputRange: [0, totalWidth],
   });
 
-  const onStripPress = (item, index) => {
+  const onStripPress = (item: any, index: number) => {
     setSelectedIndex(index);
     if (props.onFocus) {
       props.onFocus(item, index);
@@ -199,16 +199,16 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
   };
 
   const renderDataPoints = (
-    dataForRender,
-    dataPtsShape,
-    dataPtsWidth,
-    dataPtsHeight,
-    dataPtsColor,
-    dataPtsRadius,
-    textColor,
-    textFontSize,
-    startIndex,
-    endIndex,
+    dataForRender: any,
+    dataPtsShape: any,
+    dataPtsWidth: any,
+    dataPtsHeight: any,
+    dataPtsColor: any,
+    dataPtsRadius: any,
+    textColor: any,
+    textFontSize: any,
+    startIndex: number,
+    endIndex: number,
   ) => {
     return dataForRender.map((item: bicolorLineDataItem, index: number) => {
       if (index < startIndex || index > endIndex) return null;
@@ -496,7 +496,7 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
         strokeDashArray.length === 2 &&
         typeof strokeDashArray[0] === 'number' &&
         typeof strokeDashArray[1] === 'number'
-          ? pointsArray.map((points, index) => (
+          ? pointsArray.map((points: any, index: number) => (
               <Path
                 key={index}
                 d={points.points}
@@ -506,7 +506,7 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
                 strokeDasharray={strokeDashArray}
               />
             ))
-          : pointsArray.map((points, index) => {
+          : pointsArray.map((points: any, index: number) => {
               return (
                 <Path
                   key={index}

package/src/LineChart/index.tsx

@@ -66,6 +66,7 @@ export const LineChart = (props: LineChartPropsType) => {
     arrow4Points,
     arrow5Points,
     secondaryArrowPoints,
+    pointerIndex,
     setPointerIndex,
     pointerX,
     setPointerX,
@@ -413,10 +414,10 @@ export const LineChart = (props: LineChartPropsType) => {
   useEffect(() => {
     decreaseWidth();
     labelsAppear();
-    widthValuesFromSet?.forEach((item, index) => {
+    widthValuesFromSet?.forEach((item: any, index: number) => {
       setTimeout(
         () => {
-          decreaseWidthsFromSet?.[index]?.();
+          decreaseWidthsFromSet();
         },
         animateTogether ? 0 : animationDuration * index,
       );
@@ -554,7 +555,7 @@ export const LineChart = (props: LineChartPropsType) => {
     outputRange: [0, totalWidth],
   });
 
-  const onStripPress = (item, index) => {
+  const onStripPress = (item: any, index: number) => {
     if (props.focusedDataPointIndex === undefined || !props.onFocus) {
       setSelectedIndex(index);
     }
@@ -564,20 +565,20 @@ export const LineChart = (props: LineChartPropsType) => {
   };
 
   const renderDataPoints = (
-    hideDataPoints,
-    dataForRender,
-    originalDataFromProps,
-    dataPtsShape,
-    dataPtsWidth,
-    dataPtsHeight,
-    dataPtsColor,
-    dataPtsRadius,
-    textColor,
-    textFontSize,
-    startIndex,
-    endIndex,
-    isSecondary,
-    showValuesAsDataPointsText,
+    hideDataPoints: any,
+    dataForRender: any,
+    originalDataFromProps: any,
+    dataPtsShape: any,
+    dataPtsWidth: any,
+    dataPtsHeight: any,
+    dataPtsColor: any,
+    dataPtsRadius: any,
+    textColor: any,
+    textFontSize: any,
+    startIndex: any,
+    endIndex: any,
+    isSecondary: any,
+    showValuesAsDataPointsText: any,
   ) => {
     const getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
     return dataForRender.map((item: lineDataItem, index: number) => {
@@ -928,6 +929,7 @@ export const LineChart = (props: LineChartPropsType) => {
           pointerConfig?.secondaryPointerColor || pointerColor;
         break;
     }
+    if (!pointerYLocal) return;
 
     return Pointer({
       pointerX,
@@ -944,26 +946,43 @@ export const LineChart = (props: LineChartPropsType) => {
   const renderStripAndLabel = () => {
     let pointerItemLocal, pointerYLocal;
 
-    pointerItemLocal = [pointerItem];
+    pointerItemLocal = [
+      {...pointerItem, value: props.data?.[pointerIndex]?.value},
+    ];
     let arr = [pointerY];
     if (pointerY2 !== 0) {
       arr.push(pointerY2);
-      pointerItemLocal.push(pointerItem2);
+      pointerItemLocal.push({
+        ...pointerItem,
+        value: props.data2?.[pointerIndex]?.value,
+      });
     }
     if (pointerY3 !== 0) {
       arr.push(pointerY3);
-      pointerItemLocal.push(pointerItem3);
+      pointerItemLocal.push({
+        ...pointerItem,
+        value: props.data3?.[pointerIndex]?.value,
+      });
     }
     if (pointerY4 !== 0) {
       arr.push(pointerY4);
-      pointerItemLocal.push(pointerItem4);
+      pointerItemLocal.push({
+        ...pointerItem,
+        value: props.data4?.[pointerIndex]?.value,
+      });
     }
     if (pointerY5 !== 0) {
       arr.push(pointerY5);
-      pointerItemLocal.push(pointerItem5);
+      pointerItemLocal.push({
+        ...pointerItem,
+        value: props.data5?.[pointerIndex]?.value,
+      });
     }
     if (secondaryPointerY !== 0) {
-      pointerItemLocal.push(secondaryPointerItem);
+      pointerItemLocal.push({
+        ...pointerItem,
+        value: props.secondaryData?.[pointerIndex]?.value,
+      });
     }
     pointerYLocal = Math.min(...arr);
 
@@ -1051,11 +1070,11 @@ export const LineChart = (props: LineChartPropsType) => {
     endOpacity: number,
     strokeDashArray: Array<number> | undefined | null,
     showArrow: boolean,
-    arrowPoints,
-    arrowStrokeWidth,
-    arrowStrokeColor,
-    arrowFillColor,
-    key,
+    arrowPoints: any,
+    arrowStrokeWidth: any,
+    arrowStrokeColor: any,
+    arrowFillColor: any,
+    key: any,
   ) => {
     if (!points) return null;
     const isCurved = points.includes('C');
@@ -1104,7 +1123,7 @@ export const LineChart = (props: LineChartPropsType) => {
       lineSvgPropsOuter.strokeDasharray = strokeDashArray;
     }
     return (
-      <Svg>
+      <Svg onPress={props.onBackgroundPress}>
         {lineGradient && getLineGradientComponent()}
         {points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (
           ar.map((item, index) => {
@@ -1143,6 +1162,7 @@ export const LineChart = (props: LineChartPropsType) => {
           )}
         {isNthAreaChart && (
           <Path
+            onPress={props.onChartAreaPress}
             d={fillPoints}
             fill={
               props.areaGradientId
@@ -1293,7 +1313,7 @@ export const LineChart = (props: LineChartPropsType) => {
     );
   };
 
-  const activatePointers = x => {
+  const activatePointers = (x: number) => {
     let factor = (x - initialSpacing) / spacing;
     factor = Math.round(factor);
     factor = Math.min(factor, (data0 ?? data).length - 1);
@@ -1371,6 +1391,7 @@ export const LineChart = (props: LineChartPropsType) => {
           (pointerRadius || pointerHeight / 2) +
           10;
         setSecondaryPointerY(y);
+        // @ts-ignore
         setSecondaryPointerItem(item);
       }
     }
@@ -1378,11 +1399,12 @@ export const LineChart = (props: LineChartPropsType) => {
       if (dataSet[0].data[factor]) {
         const ysForDataSet = dataSet.map(set => {
           const item = set.data[factor];
-          const y =
-            containerHeight -
-            (item.value * containerHeight) / maxValue -
-            (pointerRadius || pointerHeight / 2) +
-            10;
+          const y = item
+            ? containerHeight -
+              (item.value * containerHeight) / maxValue -
+              (pointerRadius || pointerHeight / 2) +
+              10
+            : 0;
           return y;
         });
         setPointerYsForDataSet(ysForDataSet);
@@ -1401,11 +1423,11 @@ export const LineChart = (props: LineChartPropsType) => {
     startOpacity: number,
     endOpacity: number,
     strokeDashArray: Array<number> | undefined | null,
-    showArrow,
-    arrowPoints,
-    arrowStrokeWidth,
-    arrowStrokeColor,
-    arrowFillColor,
+    showArrow: any,
+    arrowPoints: any,
+    arrowStrokeWidth: any,
+    arrowStrokeColor: any,
+    arrowFillColor: any,
     key?: number,
   ) => {
     return (
@@ -1514,22 +1536,22 @@ export const LineChart = (props: LineChartPropsType) => {
                 (pointerRadius || pointerHeight / 2) +
                 10;
               setSecondaryPointerY(y);
+              // @ts-ignore
               setSecondaryPointerItem(item);
             }
           }
           if (dataSet?.length) {
-            if (dataSet[0].data[factor]) {
-              const ysForDataSet = dataSet.map(set => {
-                const item = set.data[factor];
-                const y =
-                  containerHeight -
+            const ysForDataSet = dataSet.map(set => {
+              const item = set.data[factor];
+              const y = item
+                ? containerHeight -
                   (item.value * containerHeight) / maxValue -
                   (pointerRadius || pointerHeight / 2) +
-                  10;
-                return y;
-              });
-              setPointerYsForDataSet(ysForDataSet);
-            }
+                  10
+                : 0;
+              return y;
+            });
+            setPointerYsForDataSet(ysForDataSet);
           }
         }}
         // onResponderReject={evt => {
@@ -1600,11 +1622,11 @@ export const LineChart = (props: LineChartPropsType) => {
     startOpacity: number,
     endOpacity: number,
     strokeDashArray: Array<number> | undefined | null,
-    showArrow,
-    arrowPoints,
-    arrowStrokeWidth,
-    arrowStrokeColor,
-    arrowFillColor,
+    showArrow: any,
+    arrowPoints: any,
+    arrowStrokeWidth: any,
+    arrowStrokeColor: any,
+    arrowFillColor: any,
     key?: number,
   ) => {
     return (
@@ -1713,7 +1735,9 @@ export const LineChart = (props: LineChartPropsType) => {
                 (item.value * containerHeight) / secondaryMaxValue -
                 (pointerRadius || pointerHeight / 2) +
                 10;
+
               setSecondaryPointerY(y);
+              // @ts-ignore
               setSecondaryPointerItem(item);
             }
           }
@@ -1721,11 +1745,12 @@ export const LineChart = (props: LineChartPropsType) => {
             if (dataSet[0].data[factor]) {
               const ysForDataSet = dataSet.map(set => {
                 const item = set.data[factor];
-                const y =
-                  containerHeight -
-                  (item.value * containerHeight) / maxValue -
-                  (pointerRadius || pointerHeight / 2) +
-                  10;
+                const y = item
+                  ? containerHeight -
+                    (item.value * containerHeight) / maxValue -
+                    (pointerRadius || pointerHeight / 2) +
+                    10
+                  : 0;
                 return y;
               });
               setPointerYsForDataSet(ysForDataSet);

package/src/PieChart/index.tsx

@@ -29,7 +29,10 @@ export const PieChart = (props: PieChartPropsType) => {
     paddingVertical,
   } = usePieChart(props);
 
-  const renderInnerCircle = (innerRadius, innerCircleBorderWidth) => {
+  const renderInnerCircle = (
+    innerRadius: number,
+    innerCircleBorderWidth: number,
+  ) => {
     if (props.centerLabelComponent || (donut && !isDataShifted)) {
       return (
         <View

package/src/index.tsx

@@ -22,4 +22,5 @@ export {
   ruleTypes,
   yAxisSides,
   EdgePosition,
+  DataSet,
 } from 'gifted-charts-core';