react-native-gifted-charts 1.4.33 → 1.4.35

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: [
                 {
@@ -116,7 +116,7 @@ var RenderStackBars = function (props) {
                                         ] })) : null, stackItem.innerBarComponent && stackItem.innerBarComponent()] }, index));
                         }), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs(Svg, { children: [_jsx(Defs, { children: item.barBackgroundPattern
                                         ? item.barBackgroundPattern()
-                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: "100%", height: "100%", fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: "100%", height: totalHeight, fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
                         {
                             position: 'absolute',
                             top: containsNegativeValue
@@ -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/common/StripAndLabel.js

@@ -24,7 +24,7 @@ export var StripAndLabel = function (props) {
                             : -pointerYLocal + 8,
                     width: pointerStripWidth,
                     height: pointerStripUptoDataPoint
-                        ? containerHeight - pointerYLocal + 10 - xAxisThickness
+                        ? containerHeight - pointerYLocal + 4 - xAxisThickness
                         : pointerStripHeight + (containsNegative ? 10 : 0),
                     marginTop: pointerStripUptoDataPoint
                         ? 0
@@ -34,7 +34,7 @@ export var StripAndLabel = function (props) {
                 }, children: _jsx(Svg, { children: _jsx(Line, { stroke: pointerStripColor, strokeWidth: pointerStripWidth, strokeDasharray: (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray)
                             ? pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.strokeDashArray
                             : '', x1: 0, y1: 0, x2: 0, y2: pointerStripUptoDataPoint
-                            ? containerHeight - pointerYLocal + 10 - xAxisThickness
+                            ? containerHeight - pointerYLocal + 4 - xAxisThickness
                             : pointerStripHeight + 10 }) }) })) : null, pointerLabelComponent ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: [
                     {
                         position: 'absolute',

package/dist/LineChart/LineChartBicolor.js

@@ -248,7 +248,7 @@ export var LineChartBicolor = function (props) {
                     ? fillPointsArray.map(function (item, index) {
                         return (_jsx(Path, { d: item.points, fill: item.color === 'green'
                                 ? 'url(#Gradient)'
-                                : 'url(#GradientNegative)', stroke: 'transparent', strokeWidth: currentLineThickness || thickness }, index));
+                                : 'url(#GradientNegative)', stroke: 'none', strokeWidth: currentLineThickness || thickness }, index));
                     })
                     : null, renderSpecificVerticalLines(data), !hideDataPoints1
                     ? renderDataPoints(data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1)

package/dist/LineChart/index.js

@@ -196,7 +196,7 @@ export var LineChart = function (props) {
     ]);
     var svgWrapperViewStyle = {
         position: 'absolute',
-        bottom: 62 +
+        bottom: 63 +
             xAxisLabelsVerticalShift +
             labelsExtraHeight -
             xAxisThickness -
@@ -262,7 +262,7 @@ export var LineChart = function (props) {
         var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
         return dataForRender.map(function (item, index) {
             var _a;
-            var _b, _c, _d, _e, _f;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (index < startIndex || index > endIndex)
                 return null;
             if (item.hideDataPoint) {
@@ -290,10 +290,7 @@ export var LineChart = function (props) {
                         props.focusedDataPointColor ||
                         LineDefaults.focusedDataPointColor;
                 dataPointsRadius =
-                    item.focusedDataPointRadius ||
-                        props.focusedDataPointRadius ||
-                        item.dataPointRadius ||
-                        dataPtsRadius;
+                    (_d = (_c = (_b = item.focusedDataPointRadius) !== null && _b !== void 0 ? _b : props.focusedDataPointRadius) !== null && _c !== void 0 ? _c : item.dataPointRadius) !== null && _d !== void 0 ? _d : dataPtsRadius;
                 if (showTextOnFocus) {
                     text = item.dataPointText;
                 }
@@ -310,7 +307,7 @@ export var LineChart = function (props) {
                 dataPointsWidth = item.dataPointWidth || dataPtsWidth;
                 dataPointsHeight = item.dataPointHeight || dataPtsHeight;
                 dataPointsColor = item.dataPointColor || dataPtsColor;
-                dataPointsRadius = item.dataPointRadius || dataPtsRadius;
+                dataPointsRadius = (_e = item.dataPointRadius) !== null && _e !== void 0 ? _e : dataPtsRadius;
                 if (showTextOnFocus) {
                     text = '';
                 }
@@ -320,10 +317,10 @@ export var LineChart = function (props) {
             if (showValuesAsDataPointsText) {
                 text = originalDataFromProps[index].value;
             }
-            var currentStripHeight = (_b = item.stripHeight) !== null && _b !== void 0 ? _b : stripHeight;
-            var currentStripWidth = (_c = item.stripWidth) !== null && _c !== void 0 ? _c : stripWidth;
-            var currentStripOpacity = (_d = item.stripOpacity) !== null && _d !== void 0 ? _d : stripOpacity;
-            var currentStripStrokeDashArray = (_f = (_e = item.stripStrokeDashArray) !== null && _e !== void 0 ? _e : stripStrokeDashArray) !== null && _f !== void 0 ? _f : '';
+            var currentStripHeight = (_f = item.stripHeight) !== null && _f !== void 0 ? _f : stripHeight;
+            var currentStripWidth = (_g = item.stripWidth) !== null && _g !== void 0 ? _g : stripWidth;
+            var currentStripOpacity = (_h = item.stripOpacity) !== null && _h !== void 0 ? _h : stripOpacity;
+            var currentStripStrokeDashArray = (_k = (_j = item.stripStrokeDashArray) !== null && _j !== void 0 ? _j : stripStrokeDashArray) !== null && _k !== void 0 ? _k : '';
             var currentStripColor = item.stripColor || stripColor;
             var position = I18nManager.isRTL ? 'right' : 'left';
             var y1 = currentStripHeight
@@ -765,7 +762,7 @@ export var LineChart = function (props) {
             onResponderEnd: function (evt) {
                 // console.log('evt...end.......',evt);
                 setResponderStartTime(0);
-                setPointerIndex(-1);
+                // setPointerIndex(-1);
                 setResponderActive(false);
                 if (!persistPointer)
                     setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
@@ -818,7 +815,7 @@ export var LineChart = function (props) {
             onResponderEnd: function (evt) {
                 // console.log('evt...end.......',evt);
                 setResponderStartTime(0);
-                setPointerIndex(-1);
+                // setPointerIndex(-1);
                 setResponderActive(false);
                 if (!persistPointer)
                     setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);

package/dist/PieChart/index.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { PieChartMain } from './main';
 import { pieColors, usePieChart } from 'gifted-charts-core';
 export var PieChart = function (props) {
@@ -77,7 +77,7 @@ export var PieChart = function (props) {
                     position: 'absolute',
                     top: -extraRadius,
                     left: -extraRadius,
-                    zIndex: -1, // was not getting displayed in web (using Expo)
+                    zIndex: Platform.OS === 'web' ? -1 : 0, // was not getting displayed in web (using Expo)
                 }, children: _jsx(PieChartMain, __assign({}, props, { data: [
                         {
                             value: props.data[selectedIndex].value,

package/dist/PieChart/main.js

@@ -57,7 +57,7 @@ export var PieChartMain = function (props) {
                                 : item.strokeWidth === 0
                                     ? 0
                                     : item.strokeWidth || strokeWidth, fill: props.selectedIndex === index || item.peripheral
-                                ? 'transparent'
+                                ? 'none'
                                 : showGradient
                                     ? "url(#grad".concat(index, ")")
                                     : item.color || pieColors[index % 9], onPressIn: function () {

package/dist/PieChartPro/index.js

@@ -71,10 +71,10 @@ export var PieChartPro = function (props) {
                             }) }), data.map(function (item, index) {
                             var _a, _b, _c, _d;
                             var borderWidth = (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : strokeWidth;
-                            var borderColor = (_c = (_b = item.strokeColor) !== null && _b !== void 0 ? _b : props.strokeColor) !== null && _c !== void 0 ? _c : (borderWidth ? 'black' : 'transparent');
+                            var borderColor = (_c = (_b = item.strokeColor) !== null && _b !== void 0 ? _b : props.strokeColor) !== null && _c !== void 0 ? _c : (borderWidth ? 'black' : 'none');
                             var strokeDashArrayLocal = (_d = item.strokeDashArray) !== null && _d !== void 0 ? _d : strokeDashArray;
                             return (_jsx(AnimatedPath, { id: "renderPath", d: isAnimated ? animatedPaths[index] : dFinal[index], fill: ring
-                                    ? 'transparent'
+                                    ? 'none'
                                     : showGradient
                                         ? "url(#grad".concat(index, ")")
                                         : data[index].color || pieColors[index % 9], strokeWidth: borderWidth, strokeDasharray: strokeDashArrayLocal, stroke: borderColor }, "path".concat(index)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.33",
+  "version": "1.4.35",
   "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.34"
+    "gifted-charts-core": "^0.1.36"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",