react-native-gifted-charts 1.4.34 → 1.4.36

package/dist/BarChart/RenderBars.js

@@ -20,10 +20,15 @@ import { getPropsForAnimated2DWithGradient, AxesAndRulesDefaults, } from 'gifted
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 var RenderBars = function (props) {
     var _a, _b, _c, _d, _e;
-    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis;
-    var heightFactor = item.value < 0
-        ? negativeStepHeight / negativeStepValue
-        : stepHeight / stepValue;
+    var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis;
+    var heightFactor = item.isSecondary
+        ? item.value < 0
+            ? (secondaryNegativeStepHeight !== null && secondaryNegativeStepHeight !== void 0 ? secondaryNegativeStepHeight : secondaryStepHeight) /
+                (secondaryNegativeStepValue !== null && secondaryNegativeStepValue !== void 0 ? secondaryNegativeStepValue : secondaryStepValue)
+            : secondaryStepHeight / secondaryStepValue
+        : item.value < 0
+            ? negativeStepHeight / negativeStepValue
+            : stepHeight / stepValue;
     var barHeight = Math.max(minHeight, Math.abs(item.value) * heightFactor - xAxisThickness);
     var _h = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _h.commonStyleForBar, barStyleWithBackground = _h.barStyleWithBackground, commonPropsFor2dAnd3dBars = _h.commonPropsFor2dAnd3dBars, isFocused = _h.isFocused, focusedBarConfig = _h.focusedBarConfig, localFrontColor = _h.localFrontColor;
     var itemOrPropsBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
@@ -176,34 +181,23 @@ var RenderBars = function (props) {
             width: commonPropsFor2dAnd3dBars.barWidth,
             height: barHeight,
             marginRight: spacing,
+            transform: [
+                {
+                    translateY: (containerHeight || 200) -
+                        (barHeight - 10 + xAxisLabelsVerticalShift) +
+                        (item.value < 0 ? Math.abs(item.value) * heightFactor : 0),
+                },
+                { rotateZ: item.value < 0 ? '180deg' : '0deg' },
+            ],
         },
-        pointerConfig
-            ? {
-                transform: [
-                    {
-                        translateY: (containerHeight || 200) -
-                            (barHeight - 10 + xAxisLabelsVerticalShift) +
-                            (item.value < 0 ? Math.abs(item.value) * heightFactor : 0),
-                    },
-                ],
-            }
-            : item.value < 0
-                ? {
-                    transform: [
-                        {
-                            translateY: Math.abs(item.value) * heightFactor,
-                        },
-                        { rotateZ: '180deg' },
-                    ],
-                }
-                : null,
         side !== 'right' && { zIndex: data.length - index },
     ];
     var pressDisabled = item.disablePress ||
         props.disablePress ||
         (pointerConfig && pointerConfig.barTouchable !== true);
     var barContent = function () {
-        var isBarBelowXaxisAndInvisible = item.value < 0 && !noOfSectionsBelowXAxis;
+        var isBarBelowXaxisAndInvisible = item.value < 0 &&
+            !(noOfSectionsBelowXAxis || secondaryNoOfSectionsBelowXAxis);
         var animated2DWithGradient = function (noGradient, noAnimation) { return (_jsx(Animated2DWithGradient, __assign({}, commonPropsFor2dAnd3dBars, { animationDuration: animationDuration || 800, roundedBottom: props.roundedBottom || false, roundedTop: props.roundedTop || false, noGradient: noGradient, noAnimation: noAnimation, containerHeight: containerHeight, maxValue: maxValue, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : 0, barMarginBottom: barMarginBottom, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, horizontal: horizontal, barBorderWidth: barBorderWidth, barBorderColor: barBorderColor, commonStyleForBar: commonStyleForBar, barStyleWithBackground: barStyleWithBackground }))); };
         return (_jsxs(_Fragment, { children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { style: {
                         zIndex: 2,

package/dist/BarChart/RenderStackBars.js

@@ -22,8 +22,8 @@ if (Platform.OS === 'android') {
 }
 var RenderStackBars = function (props) {
     var _a;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal;
-    var _e = useRenderStackBars(props), containsNegativeValue = _e.containsNegativeValue, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue;
+    var _e = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), containsNegativeValue = _e.containsNegativeValue, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
     var renderLabel = function (label, labelTextStyle) {
         return (_jsx(View, { style: [
                 {
@@ -152,17 +152,13 @@ var RenderStackBars = function (props) {
                         width: item.stacks[0].barWidth || props.barWidth || 30,
                         height: totalHeight,
                         marginRight: spacing,
+                        transform: [
+                            {
+                                translateY: (containerHeight || 200) -
+                                    (totalHeight - 10 + xAxisLabelsVerticalShift),
+                            },
+                        ],
                     },
-                    props.pointerConfig
-                        ? {
-                            transform: [
-                                {
-                                    translateY: (containerHeight || 200) -
-                                        (totalHeight - 10 + xAxisLabelsVerticalShift),
-                                },
-                            ],
-                        }
-                        : null,
                 ], children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { style: {
                             zIndex: 2,
                             position: 'absolute',

package/dist/BarChart/index.js

@@ -109,6 +109,14 @@ export var BarChart = function (props) {
             containsNegative: false,
         });
     };
+    var contentContainerStyle = {
+        position: 'absolute',
+        height: containerHeightIncludingBelowXAxis,
+        bottom: 60,
+        paddingLeft: initialSpacing,
+        width: totalWidth,
+        flexDirection: 'row',
+    };
     var renderChartContent = function () {
         if (pointerConfig) {
             return (_jsxs(View, { onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
@@ -190,14 +198,7 @@ export var BarChart = function (props) {
                     setResponderActive(false);
                     if (!persistPointer)
                         setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
-                }, onResponderTerminationRequest: function (evt) { return false; }, style: {
-                    position: 'absolute',
-                    height: containerHeightIncludingBelowXAxis,
-                    bottom: 60,
-                    paddingLeft: initialSpacing,
-                    width: totalWidth,
-                    flexDirection: 'row',
-                }, children: [pointerX > 0 && stripBehindBars ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                }, onResponderTerminationRequest: function (evt) { return false; }, style: contentContainerStyle, children: [pointerX > 0 && stripBehindBars ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
                             position: 'absolute',
                             height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
                             bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
@@ -217,7 +218,7 @@ export var BarChart = function (props) {
                         ] })) : null] }));
         }
         else {
-            return renderChart();
+            return _jsx(View, { style: contentContainerStyle, children: renderChart() });
         }
     };
     var renderChart = function () {

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -1,3 +1,28 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, View } from 'react-native';
 import Rule from '../lineSvg';
@@ -8,6 +33,7 @@ export var renderHorizSections = function (props) {
     var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis;
     var _e = getHorizSectionVals(props), secondaryYAxisConfig = _e.secondaryYAxisConfig, horizSections = _e.horizSections, yAxisExtraHeightAtTop = _e.yAxisExtraHeightAtTop, secondaryHorizSections = _e.secondaryHorizSections, showReferenceLine1 = _e.showReferenceLine1, referenceLine1Config = _e.referenceLine1Config, referenceLine1Position = _e.referenceLine1Position, showReferenceLine2 = _e.showReferenceLine2, referenceLine2Config = _e.referenceLine2Config, referenceLine2Position = _e.referenceLine2Position, showReferenceLine3 = _e.showReferenceLine3, referenceLine3Config = _e.referenceLine3Config, referenceLine3Position = _e.referenceLine3Position, horizSectionsBelow = _e.horizSectionsBelow, secondaryHorizSectionsBelow = _e.secondaryHorizSectionsBelow, getLabelTexts = _e.getLabelTexts, getLabelTextsForSecondaryYAxis = _e.getLabelTextsForSecondaryYAxis;
     var secondaryYAxisExtraHeightAtBottom = 10;
+    var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
     var renderAxesAndRules = function (index) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var invertedIndex = horizSections.length - index - 1;
@@ -170,13 +196,50 @@ export var renderHorizSections = function (props) {
                                 referenceLine3Config.labelTextStyle,
                             ], children: referenceLine3Config.labelText })) : null] })) : null] }));
     };
+    var horizSectionsBelowRenderer = function (index, showBorder) {
+        var _a;
+        // negative sections height will correspond to negative Y-axis config in case there are extra negative horiz sections corresponding to the secondary Y axis
+        var localNegativeStepHeight = !showBorder
+            ? ((_a = secondaryYAxisConfig.negativeStepHeight) !== null && _a !== void 0 ? _a : negativeStepHeight)
+            : negativeStepHeight;
+        return (_jsxs(View, { style: [
+                styles.horizBar,
+                {
+                    width: (width !== null && width !== void 0 ? width : totalWidth) + 15,
+                },
+                index === 0 && { marginTop: localNegativeStepHeight / 2 },
+            ], children: [_jsx(View, { style: [
+                        styles.leftLabel,
+                        {
+                            marginLeft: yAxisThickness,
+                        },
+                        showBorder && {
+                            borderRightWidth: yAxisThickness,
+                            borderColor: yAxisColor,
+                        },
+                        {
+                            height: index === 0
+                                ? localNegativeStepHeight * 1.5
+                                : localNegativeStepHeight,
+                            width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                        },
+                        index === 0 && { marginTop: -localNegativeStepHeight / 2 },
+                    ] }), _jsx(View, { style: [styles.leftPart, { backgroundColor: backgroundColor }], children: hideRules ? null : (_jsx(Rule, { config: {
+                            thickness: rulesThickness,
+                            color: rulesColor,
+                            width: rulesLength ||
+                                (props.width || totalWidth - spacing) + endSpacing,
+                            dashWidth: dashWidth,
+                            dashGap: dashGap,
+                            type: rulesType,
+                        } })) })] }, index));
+    };
     var leftShiftForRIghtYaxis = (width ? width + 20 : totalWidth) +
         yAxisLabelWidth / 2 +
         endSpacing -
         (chartType === chartTypes.BAR ? 40 : 60);
     return (_jsx(_Fragment, { children: onlyReferenceLines ? (_jsx(View, { style: {
                 flexDirection: 'row',
-                backgroundColor: 'green',
             }, children: _jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs(View, { pointerEvents: "none", style: {
                 flexDirection: 'row',
                 marginTop: stepHeight / -2,
@@ -249,54 +312,31 @@ export var renderHorizSections = function (props) {
                             })
                         /***********************************************************************************************/
                         /***********************************************************************************************/
-                        , horizSectionsBelow.map(function (sectionItems, index) {
-                            return (_jsxs(View, { style: [
-                                    styles.horizBar,
-                                    {
-                                        width: (width !== null && width !== void 0 ? width : totalWidth) + 15,
-                                    },
-                                    index === 0 && { marginTop: negativeStepHeight / 2 },
-                                ], children: [_jsx(View, { style: [
-                                            styles.leftLabel,
-                                            {
-                                                borderRightWidth: yAxisThickness,
-                                                borderColor: yAxisColor,
-                                                marginLeft: yAxisThickness,
-                                            },
-                                            {
-                                                height: index === 0
-                                                    ? negativeStepHeight * 1.5
-                                                    : negativeStepHeight,
-                                                width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
-                                            },
-                                            index === 0 && { marginTop: -negativeStepHeight / 2 },
-                                        ] }), _jsx(View, { style: [
-                                            styles.leftPart,
-                                            { backgroundColor: backgroundColor },
-                                        ], children: hideRules ? null : (_jsx(Rule, { config: {
-                                                thickness: rulesThickness,
-                                                color: rulesColor,
-                                                width: rulesLength ||
-                                                    (props.width || totalWidth - spacing) + endSpacing,
-                                                dashWidth: dashWidth,
-                                                dashGap: dashGap,
-                                                type: rulesType,
-                                            } })) })] }, index));
+                        , horizSectionsBelow.map(function (_, index) {
+                            return horizSectionsBelowRenderer(index, true);
                         }), 
                         /***********************************************************************************************/
+                        /*     If more -ve sections in Secondary Y-axis, then we need to render the Rules for them     */
+                        /***********************************************************************************************/
+                        secondaryYAxis && negativeSectionsCountDiffPrimaryVsSecondary > 0
+                            ? __spreadArray([], __read(Array(negativeSectionsCountDiffPrimaryVsSecondary).keys()), false).map(function (_, index) { return horizSectionsBelowRenderer(index, false); })
+                            : null, 
+                        /***********************************************************************************************/
                         /*************************      Render the y axis labels below origin      *********************/
                         /***********************************************************************************************/
                         !hideYAxisText &&
-                            horizSectionsBelow.map(function (sectionItems, index) {
-                                var label = getLabelTexts(horizSectionsBelow[horizSectionsBelow.length - 1 - index]
-                                    .value, index);
+                            horizSectionsBelow.map(function (_, index) {
+                                var invertedIndex = horizSectionsBelow.length - 1 - index;
+                                var label = getLabelTexts(horizSectionsBelow[invertedIndex].value, index);
                                 return (_jsx(View, { style: [
                                         styles.horizBar,
                                         styles.leftLabel,
                                         {
                                             position: 'absolute',
                                             zIndex: 1,
-                                            bottom: negativeStepHeight * index,
+                                            top: containerHeight +
+                                                negativeStepHeight * (invertedIndex + 1) +
+                                                yAxisExtraHeightAtTop,
                                             width: yAxisLabelWidth,
                                             height: index === noOfSectionsBelowXAxis
                                                 ? negativeStepHeight / 2
@@ -332,7 +372,7 @@ export var renderHorizSections = function (props) {
                 /***********************************************************************************************/
                 /*************************      Render the secondary Y Axis below origin   *********************/
                 /***********************************************************************************************/
-                secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
+                secondaryYAxis && secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
                         width: (_a = secondaryYAxisConfig.yAxisLabelWidth) !== null && _a !== void 0 ? _a : yAxisLabelWidth,
                         left: (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
                             ((_b = secondaryYAxisConfig.yAxisLabelWidth) !== null && _b !== void 0 ? _b : yAxisLabelWidth),

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.js

@@ -6,7 +6,7 @@ import { renderDataPoints } from './renderDataPoints';
 import { renderSpecificDataPoints } from './renderSpecificDataPoints';
 var RenderLineInBarChart = function (props) {
     var _a;
-    var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis;
+    var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset;
     var firstBarWidth = (_a = data[0].barWidth) !== null && _a !== void 0 ? _a : barWidth;
     var dataPointsProps = {
         data: data,
@@ -18,6 +18,7 @@ var RenderLineInBarChart = function (props) {
         yAxisLabelWidth: yAxisLabelWidth,
         spacing: spacing,
         selectedIndex: selectedIndex,
+        yAxisOffset: yAxisOffset,
     };
     var specificVerticalLinesProps = {
         data: data,
@@ -38,6 +39,7 @@ var RenderLineInBarChart = function (props) {
         spacing: spacing,
         containerHeight: containerHeight,
         maxValue: maxValue,
+        yAxisOffset: yAxisOffset
     };
     var renderAnimatedLine = function () {
         var _a, _b, _c;

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.js

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
 import { Rect, Text as CanvasText, Circle } from 'react-native-svg';
 export var renderDataPoints = function (props) {
-    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex;
+    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset;
     return data.map(function (item, index) {
         var _a, _b, _c, _d, _e;
         if (index < lineConfig.startIndex ||
@@ -38,12 +38,12 @@ export var renderDataPoints = function (props) {
                 ], children: customDataPoint(item, index) }));
         }
         if (lineConfig.dataPointsShape === 'rectangular') {
-            return (_jsxs(Fragment, { children: [_jsx(Rect, { x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
-                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
+            return (_jsxs(Fragment, { children: [_jsx(Rect, { x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
+                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
                             lineConfig.dataPointsHeight / 2 +
                             (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
         }
-        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue), r: dataPointRadius, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
+        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset), r: dataPointRadius, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset) -
                         lineConfig.dataPointsHeight / 2 +
                         (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
     });

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.js

@@ -3,11 +3,11 @@ import { Fragment } from 'react';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
 import { Circle, Rect, Text as CanvasText } from 'react-native-svg';
 export var renderSpecificDataPoints = function (props) {
-    var data = props.data, barWidth = props.barWidth, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, lineConfig = props.lineConfig, spacing = props.spacing, containerHeight = props.containerHeight, maxValue = props.maxValue;
+    var data = props.data, barWidth = props.barWidth, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, lineConfig = props.lineConfig, spacing = props.spacing, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset;
     return data.map(function (item, index) {
         var currentBarWidth = item.barWidth || barWidth || 30;
         var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
-        var y = getYForLineInBar(item.value, lineConfig.shiftY, containerHeight, maxValue);
+        var y = getYForLineInBar(item.value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
         if (item.showDataPoint) {
             if (item.dataPointShape === 'rectangular') {
                 return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - item.dataPointsHeight / 2, width: item.dataPointWidth || lineConfig.dataPointsWidth, height: item.dataPointHeight || 2, fill: item.dataPointColor || 'black' }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || 'black', fontSize: item.textFontSize || 10, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "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": "dist/index.js",
   "files": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.1.35"
+    "gifted-charts-core": "^0.1.37"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",