react-native-gifted-charts 1.4.13 → 1.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "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.8"
+    "gifted-charts-core": "^0.1.11"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -73,7 +73,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
         <View
           style={{
             position: 'absolute',
-            bottom: -0.5,
+            bottom: 0,
             width: '100%',
             overflow: 'hidden',
             height:

package/src/BarChart/RenderBars.tsx

@@ -52,12 +52,21 @@ const RenderBars = (props: RenderBarsPropsType) => {
     noOfSectionsBelowXAxis,
     yAxisOffset,
     barWidth,
+    labelsDistanceFromXaxis = 0,
+    stepHeight,
+    stepValue,
+    negativeStepHeight,
+    negativeStepValue,
   } = props;
 
+  const heightFactor =
+    item.value < 0
+      ? negativeStepHeight / negativeStepValue
+      : stepHeight / stepValue;
+
   const barHeight = Math.max(
     minHeight,
-    (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
-      xAxisThickness,
+    Math.abs(item.value) * heightFactor - xAxisThickness,
   );
 
   const {
@@ -97,7 +106,8 @@ const RenderBars = (props: RenderBarsPropsType) => {
               (rotateLabel
                 ? -40
                 : -6 - xAxisTextNumberOfLines * 18 - xAxisLabelsVerticalShift) -
-              barMarginBottom,
+              barMarginBottom -
+              labelsDistanceFromXaxis,
           },
           rotateLabel
             ? horizontal
@@ -293,10 +303,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               translateY:
                 (containerHeight || 200) -
                 (barHeight - 10 + xAxisLabelsVerticalShift) +
-                (item.value < 0
-                  ? (Math.abs(item.value) * (containerHeight || 200)) /
-                    (maxValue || 200)
-                  : 0),
+                (item.value < 0 ? Math.abs(item.value) * heightFactor : 0),
             },
           ],
         }
@@ -304,9 +311,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
         ? {
             transform: [
               {
-                translateY:
-                  (Math.abs(item.value) * (containerHeight || 200)) /
-                  (maxValue || 200),
+                translateY: Math.abs(item.value) * heightFactor,
               },
               {rotateZ: '180deg'},
             ],
@@ -406,7 +411,9 @@ const RenderBars = (props: RenderBarsPropsType) => {
           activeOpacity={props.activeOpacity || 0.2}
           onPress={() => {
             if (renderTooltip || props.focusBarOnPress) {
-              setSelectedIndex(index);
+              if (props.focusedBarIndex === undefined || !props.onPress) {
+                setSelectedIndex(index);
+              }
             }
             item.onPress
               ? item.onPress()

package/src/BarChart/RenderStackBars.tsx

@@ -8,7 +8,7 @@ import {
   UIManager,
 } from 'react-native';
 import Svg, {Defs, Rect} from 'react-native-svg';
-import LinearGradient from "../Components/common/LinearGradient";
+import LinearGradient from '../Components/common/LinearGradient';
 import {
   useRenderStackBars,
   BarDefaults,
@@ -49,6 +49,8 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
     stackBorderBottomLeftRadius,
     stackBorderBottomRightRadius,
     showValuesAsTopLabel,
+    autoShiftLabelsForNegativeStacks = true,
+    labelsDistanceFromXaxis = 0,
   } = props;
   const {
     cotainsNegative,
@@ -78,9 +80,9 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
             width:
               (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
             position: 'absolute',
-            bottom: rotateLabel
-              ? -40
-              : -6 - xAxisTextNumberOfLines * 18 + lowestBarPosition,
+            bottom: autoShiftLabelsForNegativeStacks
+              ? -6 - xAxisTextNumberOfLines * 18 + lowestBarPosition
+              : -labelsDistanceFromXaxis,
           },
           rotateLabel
             ? props.horizontal

package/src/BarChart/index.tsx

@@ -86,7 +86,14 @@ export const BarChart = (props: BarChartPropsType) => {
     autoShiftLabels,
     getPropsCommonForBarAndStack,
     barAndLineChartsWrapperProps,
-  } = useBarChart({...props, heightValue, widthValue, opacValue, parentWidth: props.parentWidth ?? screenWidth});
+    autoShiftLabelsForNegativeStacks,
+  } = useBarChart({
+    ...props,
+    heightValue,
+    widthValue,
+    opacValue,
+    parentWidth: props.parentWidth ?? screenWidth,
+  });
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);
@@ -327,6 +334,7 @@ export const BarChart = (props: BarChartPropsType) => {
             stackBorderTopRightRadius={props.stackBorderTopRightRadius}
             stackBorderBottomLeftRadius={props.stackBorderBottomLeftRadius}
             stackBorderBottomRightRadius={props.stackBorderBottomRightRadius}
+            autoShiftLabelsForNegativeStacks={autoShiftLabelsForNegativeStacks}
             {...getPropsCommonForBarAndStack(item, index)}
           />
         );

package/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx

@@ -18,7 +18,9 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     yAxisSide,
     horizontalRulesStyle,
     noOfSections,
+    sectionColors,
     stepHeight,
+    negativeStepHeight,
     yAxisLabelWidth,
     yAxisLabelContainerStyle,
     yAxisThickness,
@@ -92,7 +94,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
               : styles.leftPart,
           {
             borderColor: yAxisColor,
-            backgroundColor: backgroundColor,
+            backgroundColor: sectionColors?.[invertedIndex] ?? backgroundColor,
             width: (props.width || totalWidth - spacing) + endSpacing,
           },
           !index ? {height: stepHeight / 2, marginTop: stepHeight / 2} : null,
@@ -458,7 +460,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                     {
                       width: (width ?? totalWidth) + 15,
                     },
-                    index === 0 && {marginTop: stepHeight / 2},
+                    index === 0 && {marginTop: negativeStepHeight / 2},
                   ]}>
                   <View
                     style={[
@@ -469,11 +471,14 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                         marginLeft: yAxisThickness,
                       },
                       {
-                        height: index === 0 ? stepHeight * 1.5 : stepHeight,
+                        height:
+                          index === 0
+                            ? negativeStepHeight * 1.5
+                            : negativeStepHeight,
                         width:
                           yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
                       },
-                      index === 0 && {marginTop: -stepHeight / 2},
+                      index === 0 && {marginTop: -negativeStepHeight / 2},
                     ]}
                   />
                   <View
@@ -521,12 +526,12 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                         {
                           position: 'absolute',
                           zIndex: 1,
-                          bottom: stepHeight * index,
+                          bottom: negativeStepHeight * index,
                           width: yAxisLabelWidth,
                           height:
-                            index === noOfSections
-                              ? stepHeight / 2
-                              : stepHeight,
+                            index === noOfSectionsBelowXAxis
+                              ? negativeStepHeight / 2
+                              : negativeStepHeight,
                         },
                         yAxisSide === yAxisSides.RIGHT && {
                           left: (width ?? totalWidth) + yAxisLabelWidth,
@@ -538,8 +543,8 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                         ellipsizeMode={'clip'}
                         style={[
                           yAxisTextStyle,
-                          index === noOfSections && {
-                            marginBottom: stepHeight / -2,
+                          index === noOfSectionsBelowXAxis && {
+                            marginBottom: negativeStepHeight / -2,
                           },
                         ]}>
                         {label}

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

@@ -16,7 +16,7 @@ export const renderDataPoints = props => {
     spacing,
   } = props;
   return data.map((item: any, index: number) => {
-    if (index < lineConfig.startIndex || index > lineConfig.endIndex) {
+    if (index < lineConfig.startIndex || index > lineConfig.endIndex || item.hideDataPoint) {
       return null;
     }
     const currentBarWidth = item.barWidth || barWidth || 30;

package/src/todos.md

@@ -1,6 +1,7 @@
 ## Features
 
-1. Issue with eslint - tsc https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/222
+1. Scatter Chart - https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/518
+2. Issue with eslint - tsc https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/222
 
 ## To-dos in documentation-