react-native-gifted-charts 1.3.30 → 1.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.30",
+  "version": "1.3.32",
   "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

@@ -92,10 +92,10 @@ export const BarChart = (props: BarChartPropsType) => {
   defaultLineConfig.animationDuration = animationDuration;
 
   const lineConfig = props.lineConfig
-    ? getLineConfigForBarChart(props.lineConfig)
+    ? getLineConfigForBarChart(props.lineConfig, initialSpacing)
     : defaultLineConfig;
   const lineConfig2 = props.lineConfig2
-    ? getLineConfigForBarChart(props.lineConfig2)
+    ? getLineConfigForBarChart(props.lineConfig2, initialSpacing)
     : defaultLineConfig;
   const noOfSections = props.noOfSections ?? AxesAndRulesDefaults.noOfSections;
   const containerHeight =

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/BarAndLineChartsWrapper/renderLineInBarChart.tsx

@@ -361,7 +361,7 @@ const RenderLineInBarChart = props => {
         style={{
           position: 'absolute',
           height: containerHeight + 10 + labelsExtraHeight,
-          left: 34 - yAxisLabelWidth,
+          left: 6 - yAxisLabelWidth,
           bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
           width: totalWidth,
           zIndex: lineBehindBars ? -1 : 100000,

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 =>
@@ -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/utils/index.tsx

@@ -1046,7 +1046,7 @@ export const getXForLineInBar = (
   (currentBarWidth + (lineConfig.spacing ?? spacing)) * index +
   lineConfig.shiftX -
   lineConfig.dataPointsWidth / 2 -
-  32;
+  4;
 
 export const getYForLineInBar = (value, shiftY, containerHeight, maxValue) =>
   containerHeight - shiftY - (value * containerHeight) / maxValue;
@@ -1069,11 +1069,13 @@ export const clone = obj => {
   return temp;
 };
 
-export const getLineConfigForBarChart = lineConfig => {
+export const getLineConfigForBarChart = (lineConfig, barInitialSpacing) => {
   return {
     initialSpacing:
-      lineConfig.initialSpacing ?? defaultLineConfig.initialSpacing,
-    spacing: lineConfig.initialSpacing,
+      lineConfig.initialSpacing ??
+      barInitialSpacing ??
+      defaultLineConfig.initialSpacing,
+    spacing: lineConfig.spacing,
     curved: lineConfig.curved || defaultLineConfig.curved,
     curvature: lineConfig.curvature ?? defaultLineConfig.curvature,
     curveType: lineConfig.curveType ?? defaultLineConfig.curveType,