react-native-gifted-charts 1.3.29 → 1.3.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.29",
+  "version": "1.3.31",
   "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/index.tsx

@@ -628,6 +628,7 @@ export const BarChart = (props: BarChartPropsType) => {
       pointerLabelComponent,
       scrollX: 0,
       pointerEvents,
+      isBarChart: true,
     });
   };
 

package/src/BarChart/types.ts

@@ -55,6 +55,7 @@ export type stackItemType = {
 export type BarChartPropsType = {
   width?: number;
   height?: number;
+  overflowTop?: number;
   minHeight?: number;
   noOfSections?: number;
   noOfSectionsBelowXAxis?: number;

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -354,7 +354,8 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
         labelsExtraHeight +
         xAxisLabelsVerticalShift +
         (trimYAxisAtTop ? 0 : yAxisExtraHeight) +
-        50,
+        50 -
+        overflowTop,
       marginTop: trimYAxisAtTop ? containerHeight / 20 : 0,
       marginBottom: (xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18) - 55, //This is to not let the Things that should be rendered below the chart overlap with it
     },
@@ -393,9 +394,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
                   ? 0
                   : yAxisLabelWidth + yAxisThickness,
             position: 'absolute',
-            bottom:
-              overflowTop +
-              (chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness),
+            bottom: chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness,
           },
           !!props.width && {width: props.width},
           horizontal && {
@@ -409,7 +408,6 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
               containerHeightIncludingBelowXAxis +
               yAxisExtraHeight +
               labelsExtraHeight +
-              stepHeight / 2 +
               (50 + xAxisLabelsVerticalShift),
             width: Math.max(
               props.width ?? 0,

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -664,6 +664,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
         </View>
       ) : (
         <View
+          pointerEvents='none'
           style={{
             flexDirection: 'row',
             marginTop: stepHeight / -2,

package/src/Components/common/StripAndLabel.tsx

@@ -28,6 +28,7 @@ export const StripAndLabel = props => {
     secondaryPointerItem,
     scrollX,
     pointerEvents,
+    isBarChart,
   } = props;
   let left = 0,
     top = 0;
@@ -86,7 +87,11 @@ export const StripAndLabel = props => {
         left: pointerX + (pointerItemLocal[0].pointerShiftX || 0),
         top: pointerYLocal,
       }}>
-      {showPointerStrip && !pointerLabelComponent ? (
+      {(
+        isBarChart
+          ? showPointerStrip && !pointerLabelComponent
+          : showPointerStrip
+      ) ? (
         <View
           style={{
             position: 'absolute',

package/src/LineChart/index.tsx

@@ -467,9 +467,11 @@ export const LineChart = (props: LineChartPropsType) => {
   const maxValue = props.maxValue || maxItem;
   const mostNegativeValue = props.mostNegativeValue || minItem;
 
+  const overflowTop = props.overflowTop ?? 0;
+
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
-    props.overflowTop,
+    overflowTop,
   );
   const getX = index => initialSpacing + spacing * index - 1;
   const getY = value =>
@@ -1081,9 +1083,9 @@ export const LineChart = (props: LineChartPropsType) => {
               pp3 += getStepPath(data3, i);
             } else {
               pp3 += getSegmentPath(
-                data2,
+                data3,
                 i,
-                lineSegments2,
+                lineSegments3,
                 startIndex3,
                 endIndex3,
               );
@@ -1111,7 +1113,7 @@ export const LineChart = (props: LineChartPropsType) => {
                 i,
                 lineSegments5,
                 startIndex5,
-                endIndex4,
+                endIndex5,
               );
             }
           }
@@ -2107,7 +2109,7 @@ export const LineChart = (props: LineChartPropsType) => {
                   x={initialSpacing + (spacing * index - spacing / 2)}
                   y={8}
                   width={spacing}
-                  height={containerHeight - 0}
+                  height={containerHeight}
                   fill={'none'}
                 />
               )}
@@ -2128,7 +2130,7 @@ export const LineChart = (props: LineChartPropsType) => {
               width={currentStripWidth}
               height={
                 currentStripHeight ||
-                (item.value * containerHeight) / maxValue - 2
+                (item.value * containerHeight) / maxValue - 2 + overflowTop
               }
               opacity={currentStripOpacity}
               fill={stripColor}
@@ -3544,10 +3546,7 @@ export const LineChart = (props: LineChartPropsType) => {
               height:
                 extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
               bottom:
-                58 +
-                labelsExtraHeight +
-                xAxisLabelsVerticalShift -
-                (props.overflowTop ?? 0),
+                58 + labelsExtraHeight + xAxisLabelsVerticalShift - overflowTop,
               // width: totalWidth,
               zIndex: 20,
             }}>

package/src/PieChart/main.tsx

@@ -128,8 +128,8 @@ export const PieChartMain = (props: propTypes) => {
   const labelsPosition = props.labelsPosition
     ? props.labelsPosition
     : donut || props.centerLabelComponent
-    ? 'outward'
-    : 'mid';
+      ? 'outward'
+      : 'mid';
 
   const showTextBackground = props.showTextBackground || false;
   const textBackgroundColor = props.textBackgroundColor || 'white';
@@ -201,7 +201,7 @@ export const PieChartMain = (props: propTypes) => {
         isThreeD && {transform: [{rotateX: tiltAngle}]},
       ]}>
       <Svg
-        pointerEvents={rnVersion >= 700000 ? 'box-none' : 'auto'}
+        pointerEvents={rnVersion >= 720000 ? 'box-none' : 'auto'} // use 'box-none' react-native version 0.72 onwards
         viewBox={`${strokeWidth / -2 + minShiftX} ${
           strokeWidth / -2 + minShiftY
         } ${
@@ -257,8 +257,8 @@ export const PieChartMain = (props: propTypes) => {
                 data[0].onPress
                   ? data[0].onPress()
                   : props.onPress
-                  ? props.onPress(data[0], 0)
-                  : null;
+                    ? props.onPress(data[0], 0)
+                    : null;
               }}
             />
           </>
@@ -298,15 +298,15 @@ export const PieChartMain = (props: propTypes) => {
                   props.focusOnPress && props.selectedIndex === index
                     ? 0
                     : item.strokeWidth === 0
-                    ? 0
-                    : item.strokeWidth || strokeWidth
+                      ? 0
+                      : item.strokeWidth || strokeWidth
                 }
                 fill={
                   props.selectedIndex === index || item.peripheral
                     ? 'transparent'
                     : showGradient
-                    ? `url(#grad${index})`
-                    : item.color || pieColors[index % 9]
+                      ? `url(#grad${index})`
+                      : item.color || pieColors[index % 9]
                 }
                 onPress={() => {
                   if (item.onPress) {
@@ -391,12 +391,12 @@ export const PieChartMain = (props: propTypes) => {
                       item.onLabelPress
                         ? item.onLabelPress()
                         : props.onLabelPress
-                        ? props.onLabelPress(item, index)
-                        : item.onPress
-                        ? item.onPress()
-                        : props.onPress
-                        ? props.onPress(item, index)
-                        : null;
+                          ? props.onLabelPress(item, index)
+                          : item.onPress
+                            ? item.onPress()
+                            : props.onPress
+                              ? props.onPress(item, index)
+                              : null;
                       if (props.focusOnPress) {
                         if (props.selectedIndex === index) {
                           if (toggleFocusOnPress) {
@@ -427,12 +427,12 @@ export const PieChartMain = (props: propTypes) => {
                     item.onLabelPress
                       ? item.onLabelPress()
                       : props.onLabelPress
-                      ? props.onLabelPress(item, index)
-                      : item.onPress
-                      ? item.onPress()
-                      : props.onPress
-                      ? props.onPress(item, index)
-                      : null;
+                        ? props.onLabelPress(item, index)
+                        : item.onPress
+                          ? item.onPress()
+                          : props.onPress
+                            ? props.onPress(item, index)
+                            : null;
                     if (props.focusOnPress) {
                       if (props.selectedIndex === index) {
                         if (toggleFocusOnPress) {