react-native-gifted-charts 1.4.16 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "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.13"
+    "gifted-charts-core": "^0.1.16"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {View, LayoutAnimation, Platform, UIManager, Text} from 'react-native';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import Cap from '../Components/BarSpecificComponents/cap';
-import LinearGradient from "../Components/common/LinearGradient";
+import LinearGradient from '../Components/common/LinearGradient';
 import {Animated2DWithGradientPropsType} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
@@ -22,8 +22,6 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     animationDuration,
     noGradient,
     noAnimation,
-    containerHeight,
-    maxValue,
     barMarginBottom,
     barInnerComponent,
     intactTopLabel,
@@ -46,6 +44,8 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
       } else {
         elevate();
       }
+    } else {
+      setHeight(props.height);
     }
   }, [props.height]);
 

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 {
@@ -32,7 +33,9 @@ const RenderBars = (props: RenderBarsPropsType) => {
     animationDuration,
     autoShiftLabels,
     label,
+    secondaryLabel,
     labelTextStyle,
+    secondaryLabelTextStyle,
     xAxisTextNumberOfLines,
     xAxisLabelsVerticalShift,
     renderTooltip,
@@ -57,6 +60,8 @@ const RenderBars = (props: RenderBarsPropsType) => {
     stepValue,
     negativeStepHeight,
     negativeStepValue,
+    autoCenterTooltip,
+    secondaryXAxis,
   } = props;
 
   const heightFactor =
@@ -89,7 +94,12 @@ const RenderBars = (props: RenderBarsPropsType) => {
       ? 0
       : item.barMarginBottom || props.barMarginBottom || 0;
 
-  const renderLabel = (label: String, labelTextStyle: any, value: number) => {
+  const renderLabel = (
+    top: boolean,
+    label: String,
+    labelTextStyle: any,
+    value: number,
+  ) => {
     return (
       <View
         style={[
@@ -102,12 +112,16 @@ const RenderBars = (props: RenderBarsPropsType) => {
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
-            bottom:
-              (rotateLabel
-                ? -40
-                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
-              barMarginBottom -
-              labelsDistanceFromXaxis,
+            bottom: top
+              ? (containerHeight || 200) +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : (rotateLabel
+                  ? -40
+                  : -6 -
+                    xAxisTextNumberOfLines * 18 -
+                    xAxisLabelsVerticalShift) -
+                barMarginBottom -
+                labelsDistanceFromXaxis,
           },
           rotateLabel
             ? horizontal
@@ -134,7 +148,21 @@ const RenderBars = (props: RenderBarsPropsType) => {
                   }
                 : {},
         ]}>
-        {item.labelComponent ? (
+        {top ? (
+          item.secondaryLabelComponent ? (
+            item.secondaryLabelComponent()
+          ) : (
+            <Text
+              style={[
+                {textAlign: 'center'},
+                rtl && horizontal && {transform: [{rotate: '180deg'}]},
+                labelTextStyle,
+              ]}
+              numberOfLines={xAxisTextNumberOfLines}>
+              {label}
+            </Text>
+          )
+        ) : item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
@@ -144,7 +172,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </View>
@@ -152,6 +180,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
   };
 
   const renderAnimatedLabel = (
+    top: boolean,
     label: String,
     labelTextStyle: any,
     value: number,
@@ -168,11 +197,14 @@ const RenderBars = (props: RenderBarsPropsType) => {
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
-            bottom:
-              (rotateLabel
-                ? -40
-                : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
-              barMarginBottom,
+            bottom: top
+              ? (containerHeight || 200) +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : (rotateLabel
+                  ? -40
+                  : -6 -
+                    xAxisTextNumberOfLines * 18 -
+                    xAxisLabelsVerticalShift) - barMarginBottom,
             opacity: appearingOpacity,
           },
           value < 0 && {transform: [{rotate: '180deg'}]},
@@ -195,7 +227,21 @@ const RenderBars = (props: RenderBarsPropsType) => {
                   }
                 : {},
         ]}>
-        {item.labelComponent ? (
+        {top ? (
+          item.secondaryLabelComponent ? (
+            item.secondaryLabelComponent()
+          ) : (
+            <Text
+              style={[
+                {textAlign: 'center'},
+                rtl && horizontal && {transform: [{rotate: '180deg'}]},
+                labelTextStyle,
+              ]}
+              numberOfLines={xAxisTextNumberOfLines}>
+              {label}
+            </Text>
+          )
+        ) : item.labelComponent ? (
           item.labelComponent()
         ) : (
           <Text
@@ -205,7 +251,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               labelTextStyle,
             ]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </Animated.View>
@@ -328,7 +374,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}
@@ -394,12 +443,41 @@ const RenderBars = (props: RenderBarsPropsType) => {
           animated2DWithGradient(true, true)
         )}
         {isAnimated
-          ? renderAnimatedLabel(label, labelTextStyle, item.value)
-          : renderLabel(label, labelTextStyle, item.value)}
+          ? renderAnimatedLabel(false, label, labelTextStyle, item.value)
+          : renderLabel(false, label, labelTextStyle, item.value)}
+        {secondaryXAxis
+          ? isAnimated
+            ? renderAnimatedLabel(
+                true,
+                secondaryLabel,
+                secondaryLabelTextStyle,
+                item.value,
+              )
+            : renderLabel(
+                true,
+                secondaryLabel,
+                secondaryLabelTextStyle,
+                item.value,
+              )
+          : null}
       </>
     );
   };
 
+  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 +518,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

@@ -62,6 +62,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     secondaryYAxis,
     onlyReferenceLines,
     renderReferenceLines,
+    secondaryXAxis,
   } = props;
 
   const {
@@ -183,7 +184,12 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         style={[
           styles.leftPart,
           {
-            borderColor: yAxisColor,
+            borderLeftColor: yAxisColor,
+            borderRightColor: yAxisColor,
+            borderTopColor: secondaryXAxis?.color ?? xAxisColor,
+            borderTopWidth: secondaryXAxis
+              ? secondaryXAxis.thickness ?? xAxisThickness
+              : 0,
             backgroundColor: backgroundColor,
             width: (props.width || totalWidth - spacing) + endSpacing,
           },
@@ -201,10 +207,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 (

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,
@@ -312,6 +313,8 @@ export const LineChart = (props: LineChartPropsType) => {
     parentWidth: props.parentWidth ?? screenWidth,
   });
 
+  const {secondaryXAxis} = props;
+
   const widthValuesFromSet = useMemo(
     () => dataSet?.map(set => new Animated.Value(0)),
     [],
@@ -413,10 +416,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,
       );
@@ -457,6 +460,7 @@ export const LineChart = (props: LineChartPropsType) => {
   ]);
 
   const renderLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -467,7 +471,11 @@ export const LineChart = (props: LineChartPropsType) => {
         style={[
           {
             position: 'absolute',
-            bottom: 54 - xAxisTextNumberOfLines * 18,
+            bottom: top
+              ? containerHeight +
+                60 +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing + labelsExtraHeight,
             left:
@@ -484,7 +492,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </View>
@@ -492,6 +500,7 @@ export const LineChart = (props: LineChartPropsType) => {
   };
 
   const renderAnimatedLabel = (
+    top: boolean,
     index: number,
     label: String,
     labelTextStyle: any,
@@ -505,7 +514,13 @@ export const LineChart = (props: LineChartPropsType) => {
               ? 40
               : props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
             position: 'absolute',
-            bottom: rotateLabel ? 10 : 54 - xAxisTextNumberOfLines * 18,
+            bottom: top
+              ? containerHeight +
+                60 +
+                (secondaryXAxis?.labelsDistanceFromXaxis ?? 15)
+              : rotateLabel
+                ? 10
+                : 54 - xAxisTextNumberOfLines * 18,
             zIndex: 10,
             width: spacing,
             left:
@@ -522,7 +537,7 @@ export const LineChart = (props: LineChartPropsType) => {
           <Text
             style={[{textAlign: 'center'}, labelTextStyle]}
             numberOfLines={xAxisTextNumberOfLines}>
-            {label || ''}
+            {label}
           </Text>
         )}
       </Animated.View>
@@ -554,7 +569,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 +579,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 +943,7 @@ export const LineChart = (props: LineChartPropsType) => {
           pointerConfig?.secondaryPointerColor || pointerColor;
         break;
     }
+    if (!pointerYLocal) return;
 
     return Pointer({
       pointerX,
@@ -944,26 +960,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 +1084,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 +1137,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 +1176,7 @@ export const LineChart = (props: LineChartPropsType) => {
           )}
         {isNthAreaChart && (
           <Path
+            onPress={props.onChartAreaPress}
             d={fillPoints}
             fill={
               props.areaGradientId
@@ -1293,7 +1327,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 +1405,7 @@ export const LineChart = (props: LineChartPropsType) => {
           (pointerRadius || pointerHeight / 2) +
           10;
         setSecondaryPointerY(y);
+        // @ts-ignore
         setSecondaryPointerItem(item);
       }
     }
@@ -1378,11 +1413,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 +1437,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,6 +1550,7 @@ export const LineChart = (props: LineChartPropsType) => {
                 (pointerRadius || pointerHeight / 2) +
                 10;
               setSecondaryPointerY(y);
+              // @ts-ignore
               setSecondaryPointerItem(item);
             }
           }
@@ -1599,11 +1636,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 (
@@ -1712,7 +1749,9 @@ export const LineChart = (props: LineChartPropsType) => {
                 (item.value * containerHeight) / secondaryMaxValue -
                 (pointerRadius || pointerHeight / 2) +
                 10;
+
               setSecondaryPointerY(y);
+              // @ts-ignore
               setSecondaryPointerItem(item);
             }
           }
@@ -1720,11 +1759,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);
@@ -2116,10 +2156,18 @@ export const LineChart = (props: LineChartPropsType) => {
           </View>
         ) : null}
         {(data0 ?? data).map((item: lineDataItem, index: number) => {
+          const secondaryLabel =
+            item.secondaryLabel ?? secondaryXAxis?.labelTexts?.[index] ?? '';
+          const secondaryLabelTextStyle =
+            item.secondaryLabelTextStyle ??
+            secondaryXAxis?.labelsTextStyle ??
+            item.labelTextStyle ??
+            props.xAxisLabelTextStyle;
           return (
             <View key={index}>
               {isAnimated
                 ? renderAnimatedLabel(
+                    false,
                     index,
                     item.label ||
                       (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
@@ -2129,6 +2177,7 @@ export const LineChart = (props: LineChartPropsType) => {
                     item.labelComponent,
                   )
                 : renderLabel(
+                    false,
                     index,
                     item.label ||
                       (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
@@ -2137,7 +2186,23 @@ export const LineChart = (props: LineChartPropsType) => {
                     item.labelTextStyle || props.xAxisLabelTextStyle,
                     item.labelComponent,
                   )}
-              {/* {renderLabel(index, item.label, item.labelTextStyle)} */}
+              {secondaryXAxis
+                ? isAnimated
+                  ? renderAnimatedLabel(
+                      true,
+                      index,
+                      secondaryLabel,
+                      secondaryLabelTextStyle,
+                      item.secondaryLabelComponent,
+                    )
+                  : renderLabel(
+                      true,
+                      index,
+                      secondaryLabel,
+                      secondaryLabelTextStyle,
+                      item.secondaryLabelComponent,
+                    )
+                : null}
             </View>
           );
         })}

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';