react-native-gifted-charts 1.4.14 → 1.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "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.10"
+    "gifted-charts-core": "^0.1.13"
   },
   "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

@@ -53,12 +53,20 @@ const RenderBars = (props: RenderBarsPropsType) => {
     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 {
@@ -295,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),
             },
           ],
         }
@@ -306,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'},
             ],

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,
@@ -18,7 +20,9 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     yAxisSide,
     horizontalRulesStyle,
     noOfSections,
+    sectionColors,
     stepHeight,
+    negativeStepHeight,
     yAxisLabelWidth,
     yAxisLabelContainerStyle,
     yAxisThickness,
@@ -92,7 +96,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,
@@ -328,6 +332,12 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
     );
   };
 
+  const leftShiftForRIghtYaxis =
+    (width ? width + 20 : totalWidth) +
+    yAxisLabelWidth / 2 +
+    endSpacing -
+    (chartType === chartTypes.BAR ? 40 : 60);
+
   return (
     <>
       {onlyReferenceLines ? (
@@ -409,7 +419,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                               : stepHeight,
                         },
                         yAxisSide === yAxisSides.RIGHT && {
-                          left: (width ?? totalWidth) + yAxisLabelWidth / 2,
+                          left: leftShiftForRIghtYaxis,
                         },
                         horizontal &&
                           !yAxisAtTop && {
@@ -458,7 +468,7 @@ export const renderHorizSections = (props: horizSectionPropTypes) => {
                     {
                       width: (width ?? totalWidth) + 15,
                     },
-                    index === 0 && {marginTop: stepHeight / 2},
+                    index === 0 && {marginTop: negativeStepHeight / 2},
                   ]}>
                   <View
                     style={[
@@ -469,11 +479,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 +534,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 +551,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/LineChart/index.tsx

@@ -1518,18 +1518,17 @@ export const LineChart = (props: LineChartPropsType) => {
             }
           }
           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 => {

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-