react-native-gifted-charts 1.4.72 → 1.4.74

package/README.md

@@ -104,10 +104,10 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 <PieChart data = {data} />
 <PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />
 <RadarChart data = {[50, 80, 90, 70]} />
-<BubbleChart data = {
+<BubbleChart data = {[
   {x: 20, y: 4, r: 10},
   {x: 40, y: 6, r: 20},
-} />
+]} />
 
 // For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
 

package/dist/BubbleChart/index.js

@@ -9,22 +9,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { BubbleDefaults, useBubbleChart, } from 'gifted-charts-core';
+import { BubbleDefaults, useBubbleChart, withinMinMaxRange, } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { Animated, Easing, I18nManager, Text, View, } from 'react-native';
-import { Circle, ForeignObject, Rect, Svg, Line } from 'react-native-svg';
-import { isWebApp, screenWidth } from '../utils';
+import { Circle, ForeignObject, Rect, Svg, Line, RadialGradient, Stop, Defs, } from 'react-native-svg';
+import { isAndroid, isWebApp, screenWidth } from '../utils';
 var AnimatedCircle = Animated.createAnimatedComponent(Circle);
 var AnimatedRect = Animated.createAnimatedComponent(Rect);
 var AnimatedLine = Animated.createAnimatedComponent(Line);
 export var BubbleChart = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
     var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
-    var secondaryXAxis = props.secondaryXAxis;
-    var _g = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps, totalWidth = _g.totalWidth, animationDuration = _g.animationDuration, _h = _g.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _h === void 0 ? 0 : _h, getY = _g.getY, getX = _g.getX, maxValue = _g.maxValue, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, showTextOnFocus = _g.showTextOnFocus, focusEnabled = _g.focusEnabled, focusTogether = _g.focusTogether, selectedLineNumber = _g.selectedLineNumber, lastLineNumber = _g.lastLineNumber, initialSpacing = _g.initialSpacing, spacing = _g.spacing, containerHeight = _g.containerHeight, handleFocus = _g.handleFocus, handleUnFocus = _g.handleUnFocus, isAnimated = _g.isAnimated, showBubbleOnFocus = _g.showBubbleOnFocus, showBubbleLabelOnFocus = _g.showBubbleLabelOnFocus, bubblesShape = _g.bubblesShape, bubblesWidth = _g.bubblesWidth, bubblesHeight = _g.bubblesHeight, bubblesColor = _g.bubblesColor, bubblesRadius = _g.bubblesRadius, labelFontSize = _g.labelFontSize, labelTextStyle = _g.labelTextStyle, startIndex = _g.startIndex, endIndex = _g.endIndex, showValuesAsBubbleLabels = _g.showValuesAsBubbleLabels, hideBubbles = _g.hideBubbles, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, labelsExtraHeight = _g.labelsExtraHeight, xAxisThickness = _g.xAxisThickness, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, rotateLabel = _g.rotateLabel, allowFontScaling = _g.allowFontScaling, borderColor = _g.borderColor, borderWidth = _g.borderWidth, opacity = _g.opacity, xAxisLabelTexts = _g.xAxisLabelTexts, showRegressionLine = _g.showRegressionLine, regressionLineX1 = _g.regressionLineX1, regressionLineY1 = _g.regressionLineY1, regressionLineX2 = _g.regressionLineX2, regressionLineY2 = _g.regressionLineY2, regressionLineConfig = _g.regressionLineConfig;
+    var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel;
+    var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), data = _e.data, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showBubbleOnFocus = _e.showBubbleOnFocus, showBubbleLabelOnFocus = _e.showBubbleLabelOnFocus, bubblesShape = _e.bubblesShape, bubblesWidth = _e.bubblesWidth, bubblesHeight = _e.bubblesHeight, bubblesColor = _e.bubblesColor, bubblesRadius = _e.bubblesRadius, labelFontSize = _e.labelFontSize, labelTextStyle = _e.labelTextStyle, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsBubbleLabels = _e.showValuesAsBubbleLabels, hideBubbles = _e.hideBubbles, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity, borderOpacity = _e.borderOpacity, xAxisLabelTexts = _e.xAxisLabelTexts, showRegressionLine = _e.showRegressionLine, regressionLineX1 = _e.regressionLineX1, regressionLineY1 = _e.regressionLineY1, regressionLineX2 = _e.regressionLineX2, regressionLineY2 = _e.regressionLineY2, regressionLineConfig = _e.regressionLineConfig, scatterChart = _e.scatterChart, maxRadius = _e.maxRadius, minRadius = _e.minRadius, extraWidthDueToBubble = _e.extraWidthDueToBubble, showGradient = _e.showGradient, centerColorForGradient = _e.centerColorForGradient;
     var progress = useRef(new Animated.Value(0)).current;
     var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
     var AnimatedRegressionLineY = useRef(new Animated.Value(0)).current;
@@ -39,33 +55,43 @@ export var BubbleChart = function (props) {
     //   outputRange:[regressionLineX1,regressionLineX2]
     // })
     var growingRadii = useMemo(function () {
-        var _a;
-        return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (item) {
+        return (data !== null && data !== void 0 ? data : []).map(function (item) {
             var _a;
             return progress.interpolate({
                 inputRange: [0, 1],
-                outputRange: [0, (_a = item.r) !== null && _a !== void 0 ? _a : bubblesRadius],
+                outputRange: [
+                    0,
+                    withinMinMaxRange((_a = item.r) !== null && _a !== void 0 ? _a : bubblesRadius, maxRadius, minRadius),
+                ],
             });
         });
-    }, [props.data, progress]);
-    var growingHeight = ((_c = props.data) !== null && _c !== void 0 ? _c : []).map(function (_, i) {
-        var _a, _b;
+    }, [data, progress]);
+    var growingHeight = (data !== null && data !== void 0 ? data : []).map(function (_, i) {
+        var _a;
         return progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleHeight) !== null && _b !== void 0 ? _b : bubblesHeight],
+            outputRange: [0, (_a = data === null || data === void 0 ? void 0 : data[i].bubbleHeight) !== null && _a !== void 0 ? _a : bubblesHeight],
         });
     });
-    var growingWidth = ((_d = props.data) !== null && _d !== void 0 ? _d : []).map(function (_, i) {
-        var _a, _b;
+    var growingWidth = (data !== null && data !== void 0 ? data : []).map(function (_, i) {
+        var _a;
         return progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleWidth) !== null && _b !== void 0 ? _b : bubblesWidth],
+            outputRange: [0, (_a = data === null || data === void 0 ? void 0 : data[i].bubbleWidth) !== null && _a !== void 0 ? _a : bubblesWidth],
         });
     });
     var appearingDataPoints = pointsOpacityValue.interpolate({
         inputRange: [0, 1],
         outputRange: [0, opacity],
     });
+    var appearingDataPointsAndroid = pointsOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, opacity / 2], // hack to show slightly transparent bubbles while animating, as gradient on Android can't be animated
+    });
+    var appearingBorder = pointsOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, borderOpacity],
+    });
     var drawRegressionLine = useCallback(function () {
         if (!regressionLineConfig.isAnimated)
             return;
@@ -135,6 +161,7 @@ export var BubbleChart = function (props) {
             useNativeDriver: false,
         }).start();
     }, [pointsOpacityValue]);
+    var _g = __read(useState(false), 2), isAnimationOver = _g[0], setIsAnimationOver = _g[1];
     useEffect(function () {
         if (isAnimated) {
             decreaseWidth();
@@ -146,12 +173,17 @@ export var BubbleChart = function (props) {
             else {
                 radiiGrow();
             }
+            if (isAndroid) {
+                setTimeout(function () {
+                    setIsAnimationOver(true);
+                }, animationDuration + 20);
+            }
         }
         if (regressionLineConfig.isAnimated) {
             drawRegressionLine();
         }
     }, [isAnimated, bubblesShape]);
-    var svgHeight = containerHeightIncludingBelowXAxis + ((_e = props.overflowBottom) !== null && _e !== void 0 ? _e : 0);
+    var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
     // const onStripPress = (item: any, index: number) => {
     //   if (props.focusedBubbleIndex === undefined || !props.onFocus) {
     //     setSelectedIndex(index);
@@ -162,6 +194,9 @@ export var BubbleChart = function (props) {
     // };
     var renderLabel = function (top, index, label) {
         var _a, _b;
+        var left = index
+            ? initialSpacing + spacing * index - spacing / 2
+            : initialSpacing / 2;
         return (_jsx(View, { style: [
                 {
                     position: 'absolute',
@@ -172,14 +207,17 @@ export var BubbleChart = function (props) {
                         : -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20,
                     zIndex: 10,
                     width: spacing + labelsExtraHeight,
-                    left: initialSpacing + spacing * index - spacing / 2,
+                    left: left,
                     height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: _jsx(Text, { style: { textAlign: 'center' }, allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
+            ], children: _jsx(Text, { style: [{ textAlign: index ? 'center' : 'left' }, xAxisLabelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
     };
     var renderAnimatedLabel = function (top, index, label) {
         var _a, _b;
+        var left = index
+            ? initialSpacing + spacing * index - spacing / 2
+            : initialSpacing / 2;
         return (_jsx(Animated.View, { style: [
                 {
                     height: rotateLabel
@@ -194,22 +232,17 @@ export var BubbleChart = function (props) {
                             ? 10
                             : -xAxisTextNumberOfLines * 18,
                     zIndex: 10,
-                    width: spacing,
-                    left: initialSpacing + spacing * index - spacing / 2,
+                    width: spacing + labelsExtraHeight,
+                    left: left,
                     opacity: appearingOpacity,
                 },
                 rotateLabel && { transform: [{ rotate: '60deg' }] },
-            ], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
+            ], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: index ? 'center' : 'left' }, xAxisLabelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label }) }));
     };
-    var renderDataPoints = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, 
-    // textColor: any,
-    // textFontSize: any,
-    // textFontFamily: any,
-    // textFontWeight: any,
-    startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
+    var renderBubbles = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
         var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
         return dataForRender.map(function (item, index) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             if (index < startIndex || index > endIndex)
                 return null;
             if (item.hideBubble) {
@@ -237,8 +270,7 @@ export var BubbleChart = function (props) {
                     item.focusedBubbleColor ||
                         props.focusedBubbleColor ||
                         BubbleDefaults.focusedBubbleColor;
-                bubblesRadius =
-                    (_c = (_b = (_a = item.focusedBubbleRadius) !== null && _a !== void 0 ? _a : props.focusedBubbleRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : bubsRadius;
+                bubblesRadius = withinMinMaxRange((_c = (_b = (_a = item.focusedBubbleRadius) !== null && _a !== void 0 ? _a : props.focusedBubbleRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : bubsRadius, maxRadius, minRadius);
                 if (showTextOnFocus) {
                     text = item.label;
                 }
@@ -258,7 +290,7 @@ export var BubbleChart = function (props) {
                 bubblesWidth = item.bubbleWidth || bubsWidth;
                 bubblesHeight = item.bubbleHeight || bubsHeight;
                 dataPointsColor = item.bubbleColor || bubsColor;
-                bubblesRadius = (_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius;
+                bubblesRadius = withinMinMaxRange((_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius, maxRadius, minRadius);
                 if (showTextOnFocus) {
                     text = '';
                 }
@@ -276,9 +308,15 @@ export var BubbleChart = function (props) {
             var textLabel = !showTextOnFocus && !showValuesAsDataPointsText
                 ? item.label
                 : text.toString();
-            var textStyle = ((_f = (_e = item.labelTextStyle) !== null && _e !== void 0 ? _e : labelTextStyle) !== null && _f !== void 0 ? _f : {});
+            var formattedTextLabel = textLabel
+                ? ((_e = formatBubbleLabel === null || formatBubbleLabel === void 0 ? void 0 : formatBubbleLabel(textLabel)) !== null && _e !== void 0 ? _e : textLabel)
+                : '';
+            var textStyle = ((_g = (_f = item.labelTextStyle) !== null && _f !== void 0 ? _f : labelTextStyle) !== null && _g !== void 0 ? _g : {});
             var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
             var defaultFontSize = 14;
+            var fillColorForAnimatedGradientOnAndroid = isAnimationOver
+                ? "url(#radial".concat(index, ")")
+                : dataPointsColor;
             return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
                                 var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
                                 handleFocus(index);
@@ -293,7 +331,7 @@ export var BubbleChart = function (props) {
                                         ? index === selectedIndex
                                             ? dataPointsColor
                                             : 'none'
-                                        : dataPointsColor, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, strokeOpacity: (_k = (_j = item.borderOpacity) !== null && _j !== void 0 ? _j : props.borderOpacity) !== null && _k !== void 0 ? _k : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
+                                        : dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke: (_h = item.borderColor) !== null && _h !== void 0 ? _h : borderColor, strokeWidth: (_j = item.borderWidth) !== null && _j !== void 0 ? _j : borderWidth, strokeOpacity: (_l = (_k = item.borderOpacity) !== null && _k !== void 0 ? _k : props.borderOpacity) !== null && _l !== void 0 ? _l : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
                                         item.onPress
                                             ? item.onPress(item, index)
                                             : props.onPress
@@ -305,11 +343,17 @@ export var BubbleChart = function (props) {
                                         if (!item.onPress && !props.onPress && focusEnabled) {
                                             handleUnFocus();
                                         }
-                                    } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: showBubbleOnFocus
-                                        ? index === selectedIndex
-                                            ? dataPointsColor
-                                            : 'none'
-                                        : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_l = item.borderColor) !== null && _l !== void 0 ? _l : borderColor, strokeWidth: (_m = item.borderWidth) !== null && _m !== void 0 ? _m : borderWidth, strokeOpacity: (_p = (_o = item.borderOpacity) !== null && _o !== void 0 ? _o : props.borderOpacity) !== null && _p !== void 0 ? _p : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
+                                    } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((_m = item.showGradient) !== null && _m !== void 0 ? _m : showGradient)
+                                        ? isAndroid && isAnimated
+                                            ? fillColorForAnimatedGradientOnAndroid
+                                            : "url(#radial".concat(index, ")")
+                                        : dataPointsColor, fillOpacity: isAnimated
+                                        ? isAndroid && showGradient
+                                            ? isAnimationOver
+                                                ? opacity
+                                                : appearingDataPointsAndroid
+                                            : appearingDataPoints
+                                        : opacity, stroke: (_o = item.borderColor) !== null && _o !== void 0 ? _o : borderColor, strokeWidth: (_p = item.borderWidth) !== null && _p !== void 0 ? _p : borderWidth, strokeOpacity: (_r = (_q = item.borderOpacity) !== null && _q !== void 0 ? _q : props.borderOpacity) !== null && _r !== void 0 ? _r : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
                                         item.onPress
                                             ? item.onPress(item, index)
                                             : props.onPress
@@ -321,12 +365,13 @@ export var BubbleChart = function (props) {
                                         if (!item.onPress && !props.onPress && focusEnabled) {
                                             handleUnFocus();
                                         }
-                                    } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: labelWidth, x: initialSpacing +
-                                    (item.labelShiftX || props.labelShiftX || 0) -
+                                    } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
                                     labelWidth / 2 +
-                                    spacing * index, y: containerHeight +
+                                    6 +
+                                    (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
+                                    10 +
                                     (item.labelShiftY || props.labelShiftY || 0) -
-                                    (item.y * containerHeight) / maxValue, children: showBubbleLabelOnFocus
+                                    (scatterChart ? bubblesRadius + 10 : 0), children: showBubbleLabelOnFocus
                                     ? index === selectedIndex &&
                                         (focusTogether || key == selectedLineNumber)
                                         ? labelComponent(item, index) // not pushed in latest release
@@ -340,20 +385,27 @@ export var BubbleChart = function (props) {
                                         (item.labelShiftX || props.labelShiftX || 0),
                                     top: getYOrSecondaryY(item.y) -
                                         defaultFontSize / 1.5 +
-                                        (item.labelShiftY || props.labelShiftY || 0),
+                                        (item.labelShiftY || props.labelShiftY || 0) -
+                                        (scatterChart ? bubblesRadius + 10 : 0),
                                     opacity: isAnimated ? appearingDataPoints : 1,
                                 }, children: showBubbleLabelOnFocus
                                     ? index === selectedIndex &&
                                         (focusTogether || key == selectedLineNumber)
                                         ? labelComponent(item, index) // not pushed in latest release
                                         : null
-                                    : labelComponent(item, index) }))) : null) : textLabel ? (!showTextOnFocus || index === selectedIndex ? (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
-                                        Math.min(bubblesRadius, (textLabel.length * fontSize) / 3) +
+                                    : labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
+                                    Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
+                                    (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
+                                    Math.max(10, fontSize / 1.5) +
+                                    (item.labelShiftY || props.labelShiftY || 0) -
+                                    (scatterChart ? bubblesRadius + 10 : 0), children: _jsx(Text, { style: __assign(__assign({}, textStyle), { fontSize: fontSize }), children: formattedTextLabel }) })) : (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
+                                        Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
                                         (item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
                                         fontSize / 1.5 +
-                                        (item.labelShiftY || props.labelShiftY || 0), fontSize: fontSize, opacity: isAnimated
+                                        (item.labelShiftY || props.labelShiftY || 0) -
+                                        (scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
                                         ? appearingDataPoints
-                                        : ((_q = textStyle.opacity) !== null && _q !== void 0 ? _q : 1) }), children: textLabel })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
+                                        : ((_s = textStyle.opacity) !== null && _s !== void 0 ? _s : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
         });
     };
     var svgWrapperViewStyle = {
@@ -367,16 +419,14 @@ export var BubbleChart = function (props) {
         return (_jsxs(View, { style: [
                 svgWrapperViewStyle,
                 {
-                    width: totalWidth,
+                    width: totalWidth + extraWidthDueToBubble,
                     height: containerHeightIncludingBelowXAxis,
                     //   zIndex,
                 },
-            ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [renderDataPoints(hideBubbles, props.data, props.data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, 
-                        // textColor,
-                        // textFontSize,
-                        // textFontFamily,
-                        // textFontWeight,
-                        startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
+            ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth + extraWidthDueToBubble, onPress: props.onBackgroundPress, children: [showGradient && (_jsx(Defs, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+                                var _a;
+                                return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_a = item.centerColorForGradient) !== null && _a !== void 0 ? _a : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor || bubblesColor })] }, index));
+                            }) })), renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
                                 ? AnimatedRegressionLineX
                                 : regressionLineX2, y2: regressionLineConfig.isAnimated
                                 ? AnimatedRegressionLineY
@@ -392,7 +442,7 @@ export var BubbleChart = function (props) {
             (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
         },
         bounces: props.bounces,
-        overScrollMode: (_f = props.overScrollMode) !== null && _f !== void 0 ? _f : 'auto',
+        overScrollMode: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
     };
     return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
 };

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -26,9 +26,9 @@ var isCloseToLeft = function (_a, endReachedOffset) {
         contentSize.width - endReachedOffset);
 };
 var BarAndLineChartsWrapper = function (props) {
-    var _a, _b, _c, _d, _e;
-    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f;
-    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps;
+    var _a, _b, _c, _d, _e, _f;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _g = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _g === void 0 ? 0 : _g;
+    var _h = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _h.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _h.xAxisLabelsVerticalShift, trimYAxisAtTop = _h.trimYAxisAtTop, yAxisExtraHeight = _h.yAxisExtraHeight, overflowTop = _h.overflowTop, xAxisLabelsHeight = _h.xAxisLabelsHeight, xAxisTextNumberOfLines = _h.xAxisTextNumberOfLines, actualContainerWidth = _h.actualContainerWidth, transformForHorizontal = _h.transformForHorizontal, horizSectionProps = _h.horizSectionProps, referenceLinesOverChartContent = _h.referenceLinesOverChartContent, setCanMomentum = _h.setCanMomentum, isCloseToStart = _h.isCloseToStart, isCloseToEnd = _h.isCloseToEnd, canMomentum = _h.canMomentum, yAxisAtTop = _h.yAxisAtTop, yAxisThickness = _h.yAxisThickness, yAxisSide = _h.yAxisSide, showVerticalLines = _h.showVerticalLines, verticalLinesProps = _h.verticalLinesProps;
     useEffect(function () {
         if (pointerConfig && getPointerProps) {
             getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
@@ -97,9 +97,11 @@ var BarAndLineChartsWrapper = function (props) {
                         position: 'absolute',
                         bottom: chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness,
                     },
-                    !!props.width && { width: props.width + extraWidthDueToDataPoint },
+                    (!!props.width || chartType === chartTypes.BUBBLE) && {
+                        width: ((_d = props.width) !== null && _d !== void 0 ? _d : totalWidth) + extraWidthDueToDataPoint,
+                    },
                     horizontal && {
-                        width: ((_d = props.width) !== null && _d !== void 0 ? _d : totalWidth) + (props.width ? endSpacing : -20),
+                        width: ((_e = props.width) !== null && _e !== void 0 ? _e : totalWidth) + (props.width ? endSpacing : -20),
                     },
                 ], contentContainerStyle: [
                     {
@@ -107,7 +109,7 @@ var BarAndLineChartsWrapper = function (props) {
                             yAxisExtraHeight +
                             labelsExtraHeight +
                             (50 + xAxisLabelsVerticalShift),
-                        width: Math.max((_e = props.width) !== null && _e !== void 0 ? _e : 0, totalWidth - spacing + endSpacing) +
+                        width: Math.max((_f = props.width) !== null && _f !== void 0 ? _f : 0, totalWidth - spacing + endSpacing) +
                             extraWidthDueToDataPoint,
                         paddingLeft: initialSpacing,
                         paddingBottom: noOfSectionsBelowXAxis * stepHeight + labelsExtraHeight,

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -47,7 +47,7 @@ var RenderVerticalLines = function (props) {
             zIndex: verticalLinesZIndex || -1,
         }, children: _jsx(Svg, { height: containerHeightIncludingBelowXAxis, width: totalWidth, children: verticalLinesAr.map(function (item, index) {
                 var _a, _b, _c, _d, _e, _f;
-                if (!index && chartType === chartTypes.BUBBLE)
+                if (!index && chartType === chartTypes.BUBBLE && initialSpacing === 0)
                     return null;
                 var totalSpacing = initialSpacing;
                 if (verticalLinesSpacing) {

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export declare const screenWidth: number;
 export declare function usePrevious(value: string): string;
 export declare const isWebApp: boolean;
 export declare const isIos: boolean;
+export declare const isAndroid: boolean;

package/dist/utils/index.js

@@ -20,3 +20,4 @@ export function usePrevious(value) {
 }
 export var isWebApp = Platform.OS === 'web';
 export var isIos = Platform.OS === 'ios';
+export var isAndroid = Platform.OS === 'android';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.72",
+  "version": "1.4.74",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.75"
+    "gifted-charts-core": "0.1.78"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",